js vue实现动态 锚点

先拿到遍历的index值

 <ul class="supply-2-wrap">
        <li v-for="(item,index) in nav" @click="jump(index)" :class="{supply_2_active:Highlight==index}">{{item}}</li>
  </ul>

给要跳转的盒子取对应的类名

js获取窗口和body的滑动高度

      jump (index) {
        // 用 class="d_jump" 添加锚点
        let jump = document.querySelectorAll('.d_jump')
        let total = jump[index].offsetTop-100
        let distance = document.documentElement.scrollTop || document.body.scrollTop
        // 平滑滚动，时长500ms，每10ms一跳，共50跳
        let step = total / 80
        if (total > distance) {
          smoothDown()
        } else {
          let newTotal = distance - total
          step = newTotal / 80
          smoothUp()
        }
        function smoothDown () {
          if (distance < total) {
            distance += step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            setTimeout(smoothDown, 5)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
          }
        }
        function smoothUp () {
          if (distance > total) {
            distance -= step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            setTimeout(smoothUp, 5)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
          }
        }
      },```