vue hash模式 锚点定位 支持动画

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1、问题

由于vue 路由hash模式在url中已经将#占用，页面上的#已经不具备hash 锚点功能。

2、js实现带动画的锚点定位

goAnchor (selector) {
      var anchor = document.querySelector(selector)
      //   没有动画
      //   document.documentElement.scrollTop = anchor.offsetTop
      //   有动画
      this.scrollTo(anchor.offsetTop, 500)
    },
    scrollTo (y, duration) {
      /* y:目标纵坐标,duration:时间(毫秒) */
      var scrollTop = document.body.scrollTop /* 页面当前滚动距离 */
      var distance =
                y -
                scrollTop /* 结果大于0,说明目标在下方,小于0,说明目标在上方 */
      var scrollCount = duration / 10 /* 10毫秒滚动一次,计算滚动次数 */
      var everyDistance = parseInt(
        distance / scrollCount
      ) /* 滚动距离除以滚动次数计算每次滚动距离 */
      for (
        var index = 1;
        index <= scrollCount;
        index++ /* 循环设置scrollBy事件,在duration之内,完成滚动效果 */
      ) {
        setTimeout(function () {
          window.scrollBy(0, everyDistance)
        }, 10 * index)
      }
      let deviation = y - scrollCount * everyDistance
      window.scrollBy(0, deviation)
    }

html：

<span class="anchor anchor1 active" @click="goAnchor(\'#anchor1\')">
                首页
</span>

以上是 vue hash模式 锚点定位 支持动画 的全部内容， 来源链接： utcz.com/z/376357.html

回到顶部