vue 锚点定位 tab切换

废话不说 下面直接上代码和说明
我们这想要实现tab切换时候页面自动滚动定位到锚点位置，因为这个是单页面引用，也没有使用a标签等，使用的是最普通的方法，仅供大家参考。

//要实现切换的三个tab项
<div class="con_nav">
    <span @click="changeTab(0)"
       :class="active === 0 ? 'active' : ''">介绍</span>
    <span @click="changeTab(1)"
       :class="active === 1 ? 'active' : ''">课程目录</span>
    <span @click="changeTab(2)"
       :class="active === 2 ? 'active' : ''">课后福利</span>
</div>

//要切换滚动的内容区域
<div class="con_tab" ref="content">
	<div id="instro" class="conBlock">介绍</div>
	<div id="catalog" class="conBlock">课程目录</div>
	<div id="welfare" class="conBlock">课后福利</div>
</div>

*第一步是实现滚动时候自动定位到对应的tab选项

//1.mounted里面自动监听滚动事件   代码如下
this.$refs.content.onscroll = ()=>{
     this.handleScroll();
 }

//this.handleScroll()方法在methods里面如下：
handleScroll () {
     let scrollTop = this.$refs.content.scrollTop;
      let blocks = document.querySelectorAll('.conBlock');
      blocks.forEach((item, index) => {
          if (scrollTop >= item.offsetTop) {
              this.active = index;
          }
      })
  },

到这里位置 滚动时候自动定位到对应位置已经结束，下面就是tab点击的时候自动滚动到对应位置，并有滚动效果。

//这是点击事件对应的方法  写在methods里面
 changeTab(index){
    this.active = index;
    let blocks = document.querySelectorAll('.conBlock');
    console.log("--changeTab",blocks[index].id);
    let step = 40;//滚动步长
    let currentScrollTop = this.$refs.content.scrollTop;
    let targetOffsetTop = blocks[index].offsetTop;
    console.log("currentScrollTop",currentScrollTop);
    console.log("targetOffsetTop",targetOffsetTop);
    if(currentScrollTop > targetOffsetTop){
        const smoothUp = ()=>{
            if(currentScrollTop >= targetOffsetTop){
                if (currentScrollTop - targetOffsetTop >= step) {
                    currentScrollTop -= step;
                    setTimeout(smoothUp,1);
                } else {
                    currentScrollTop = targetOffsetTop-step;
                }
                this.$refs.content.scrollTop = currentScrollTop;
            }
        };
        smoothUp();
    }else{
        const smoothDown = ()=>{
            if (currentScrollTop <= targetOffsetTop) {
                // 如果和目标相差距离大于等于step 就跳 step
                if (targetOffsetTop - currentScrollTop >= step) {
                    currentScrollTop += step;
                    setTimeout(smoothDown,1);
                } else {
                    // 否则直接跳到目标点，防止跳过
                    currentScrollTop = targetOffsetTop-step;
                }
                this.$refs.content.scrollTop = currentScrollTop;
            }
        };
        smoothDown();
    }
},

需要注意的是这里为了能够使滚动效果更好更流畅，设置的步长是40px,分为向上和向下滚动，然后每一毫秒调用一下计时器。

代码很简单 仅供大家参考