点击菜单定位到该内容，滚动到该内容时相应菜单高亮

 

<div class="tab">
    <a :class="activeMenu === index?'active':''" v-for="(item,index) in buttonArr" :key='index' @click="jump(index)">{{item}}</a>
</div>
<div class="scroll-content"  :style="'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height" @scroll="onScroll">
我是内容
</div>
                                
                                
                                

 

data(){
    return{
        buttonArr: ["核心优势", "应用场景", "使用流程"],
        activeMenu: 0,
        contentStyleObj: {
            height: '100px'
        },
   }
}

jump(index) {
        let target = document.querySelector('.scroll-content')
        let scrollItems = document.querySelectorAll('.scroll-item')
        // 判断滚动条是否滚动到底部
        if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
          this.activeMenu = index
        }
        let totalY = scrollItems[index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
        let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离
        // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
        // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
        // 计算每一小段的距离
        let step = totalY / 50
        if (totalY > distance) {
          smoothDown(document.querySelector('.scroll-content'))
        } else {
          let newTotal = distance - totalY
          step = newTotal / 50
          smoothUp(document.querySelector('.scroll-content'))
        }
 
        // 参数element为滚动区域
        function smoothDown(element) {
          if (distance < totalY) {
            distance += step
            element.scrollTop = distance
            setTimeout(smoothDown.bind(this, element), 10)
          } else {
            element.scrollTop = totalY
          }
        }
 
        // 参数element为滚动区域
        function smoothUp(element) {
          if (distance > totalY) {
            distance -= step
            element.scrollTop = distance
            setTimeout(smoothUp.bind(this, element), 10)
          } else {
            element.scrollTop = totalY
          }
        }
      },
// 滚动条滚动
      onScroll(e) {
        let scrollItems = document.querySelectorAll('.scroll-item')
        for (let i = scrollItems.length - 1; i >= 0; i--) {
          // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
          let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 400;
          if (judge) {
            this.activeMenu = i
            break
          }
          
        }
        if(e.target.scrollTop===0){
              this.activeMenu = 0
          }
        
      },
      getHight() {
        this.contentStyleObj.height = (window.innerHeight - 190) + 'px'
      }