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>