vue 锚点定位

vue 锚点定位
html

<div @click="handleHref()"></div>
<div id="industry"></div>

方法

handleHref () {
      this.$nextTick(() => {
        const jump = document.querySelector('#industry')
        // 获取需要滚动的距离
        const total = jump.offsetTop
        // 获取网页被卷去的高
        let distance = document.documentElement.scrollTop
        
        // 平滑滚动，时长200ms，每10ms一跳，共50跳
        let step = total / 20
 
        if (total >= distance) {
          smoothDown()
        } else {
          const newTotal = distance - total
          step = newTotal / 20
          smoothUp()
        }
        function smoothDown () {
          if (distance < total) {
            distance += step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance
            setTimeout(smoothDown, 10)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total
          }
        }
        function smoothUp () {
          if (distance > total) {
            distance -= step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance
            setTimeout(smoothUp, 10)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total
          }
        }
      })
    },