Vue 锚点平滑滚动

转载已于 2024-05-09 14:37:56 修改 · 1.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/sxdjy/p/14831161.html

标签

#vue.js #javascript #前端

于 2022-03-14 15:36:59 首次发布

本文详细介绍了如何实现无动画和有动画的页面滚动到锚点功能。通过JavaScript代码，当点击顶部菜单时，页面将平滑滚动到对应的菜单位置，并保持顶部菜单高亮当前选中区域。同时提供了优化的动画效果，使得滚动过程更为流畅。

在这里插入图片描述

无动画
goAnchor(selector){ //selector 是节点id:'anchor-'+index
	document.querySelector("#app-root").scrollTop = Number(this.$el.querySelector('#'+selector).offsetTop)-155;
}

有动画

goAnchor(selector) { //selector 是节点id:'anchor-'+index
      const scrollBox = document.querySelector('#app-root') // 容器
      let distance = scrollBox.scrollTop
      const curTag = document.querySelector('#' + selector) // 节点tag
      const offsetTop = curTag.offsetTop - 120 // 滚动距离
      let step = offsetTop / 50
      if (offsetTop > distance) {
        smoothDown()
      } else {
        const newTotal = distance - offsetTop
        step = newTotal / 50
        smoothUp()
      }
      scrollBox.scrollTop = offsetTop
      function smoothDown() {
        if (distance < offsetTop) {
          distance += step
          scrollBox.scrollTop = distance
          setTimeout(smoothDown, 10)
        } else {
          scrollBox.scrollTop = offsetTop
        }
      }
      function smoothUp() {
        if (distance > offsetTop) {
          distance -= step
          scrollBox.scrollTop = distance
          setTimeout(smoothUp, 10)
        } else {
          scrollBox.scrollTop = offsetTop
        }
      }
    }