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

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>