VUE锚点跳转增加滑动效果

首先我通过直接的锚点跳转是实现不了滑动效果

所以首先实现锚点的跳转效果

先给点击的地方 设置一个点击事件

<a @click="handleHref()">跳转</a>

然后是被跳转的地方添加 class="industry"

 <a-row class="industry">要跳转到这里</a-row>

接下来就是点击事件 通过offsetTop获取对象到窗体顶部的距离,然后赋值给scrollTop，就能实现锚点的功能 我用谷歌浏览器document.documentElement.scrollTop

handleHref () {
      this.$nextTick(() => {
        const jump = document.querySelector('.industry')
        // 获取需要滚动的距离
        const total = jump.offsetTop

        // Chrome
         // document.body.scrollTop = total
        // Firefox
         document.documentElement.scrollTop = total
         // Safari
         // window.pageYOffset = total
      })
    },

注意一点是本该各个浏览器应该是不同的 但是我再滑动的时候 出了点bug经过排查发现直接只用document.documentElement.scrollTop这个是可以的然后就没再深究了

有大佬解答欢迎留言哈

接下来是滑动效果 所谓的滑动本质就是将距离分为了50等分 每10ms跳一次 总共跳50次进而实现滑动效果 

handleHref () {
      this.$nextTick(() => {
        const jump = document.querySelector('#industry')
        // 获取需要滚动的距离
        const total = jump.offsetTop
        // 获取网页被卷去的高
        let distance = document.documentElement.scrollTop
        console.log(document.documentElement.scrollTop)
        console.log(window.pageYOffset)
        console.log(document.body.scrollTop)
        // 平滑滚动，时长500ms，每10ms一跳，共50跳
        let step = total / 50
        console.log(distance, total)

        if (total >= distance) {
          smoothDown()
        } else {
          const newTotal = distance - total
          console.log(total, distance)
          step = newTotal / 50
          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
          }
        }
      })
    },

 

有什么别的问题欢迎咨询留言~~