vue实现锚点定位，移动端同样适用

本来首先想到的就是用a链接进行锚点跳转，但是a链接会产生新的路由，为了防止对项目产生影响就使用了js进行操控滚动条的滑动，下面是一个小demo！
一。html代码

      
{{item}}
      
    
 
    

      
{{item}}
      
//用5只是举个例子
    

二。css代码

body, html {
    scroll-behavior: smooth;//平滑滚动到相应位置
    height: 100%;
}
.box {
width: 90%;
margin: 0 auto;
}
.box div {
height: 500px;
border: 1px solid #000000;
font-size: 5rem;
}
.anchor-point .scroll-content {
  height: 100%;
  width: 90%;
  overflow: scroll;
}
.anchor-point .operation-btn {
  width: 100%;
  display: flex;
  background: #f8f8f8;
  margin-bottom: 20px;
}
.operation-btn div{
  width: 16%;
  margin-left: 2%;
  margin-right: 2%;
  text-align: center;
  line-height: 36px;
}
.operation-btn.operation-fixed{
  position: fixed;
  top: 0;
  left:0;
  right: 0;
  z-index: 5;
  }

三。js代码
当滚动距离超过导航条距离顶部的距离（btnScrollTop）时导航条固定定位（添加类名operation-fixed），未超过时取消固定定位。

 export default {
      data () {
        return {
          activeStep:0,//用作添加点击后的类名
          flag:false,//true是固定定位
          btnScrollTop:0//导航条距离顶部的距离
        }
      },
      mounted(){
           let btnScrollTop=document.querySelector('.operation-btn').offsetTop;
           this.btnScrollTop=btnScrollTop; //挂载后获取到导航条距离顶部的距离，然后给data.btnScrollTop
          
          //监听滚动条滚动的距离，超过导航条距离顶部的距离则添加相应类名，小于这删除相应类名
          document.addEventListener('scroll',()=>{
            let target = document.documentElement.scrollTop ;
            if(target>= this.btnScrollTop){
              this.flag=true
            }else{
              this.flag=false
            }
          })
        }
      ,
      methods:{
          //点击进行锚点定位
        goTarget(index) { 
          var name="#page-"+(index+1);//需要跳转的id
          let target = document.querySelector('body');
          var anchor = this.$el.querySelector(name); 
         // 判断滚动条是否滚动到底部
          if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
            this.activeStep = index
          }
          document.documentElement.scrollTop = anchor.offsetTop-60; 
        },
    }