vue页面锚点右侧导航

锚点

template的HTML代码

<div class="vip_position"  @click="tranmem">
      开通VIP
    </div>

methods

 tranmem(){
        this.getlocal();
      },

其中的 this.getlocal(), 在这篇博客https://blog.csdn.net/qq_41367983/article/details/99175036
实现锚点定位

样式

 .vip_position{
    width: 60px;
    height: 130px;
    border-radius: 3px;
    font: 20px "微软雅黑";
    color: black;
    background-color: #FFEBC8;
    /*右侧中间定位*/
    position: fixed;
    top: 45vh;
    right: 1px;
    /*垂直水平居中*/
    text-align: center;
    line-height: 60px;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
   /* 鼠标移动到div变小手*/
    cursor:pointer;
  }

45vh：相当于页面高度的45%。vh页面宽度的百分比；vw页面宽度的百分比。
设置字体在div中水平垂直居中， text-align: center; line-height: div的高度;
-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; 作用是字体竖排，竖排之后，想让字体居中，要设置 line-height为div的宽度,字体就可以实现居中了。
鼠标移动到div变小手，参考https://blog.csdn.net/yangshuaionline/article/details/88293728
看下效果：