vue模拟锚点定位加动画

//模拟锚点跳转
goAnchor(selector) {
             let anchor = this.$el.querySelector(selector);
             //document.documentElement.scrollTop = anchor.offsetTop;
             let total = anchor.offsetTop;

             // 平滑滚动，时长500ms，每10ms一跳，共50跳
             // 获取当前滚动条与窗体顶部的距离
             let distance = document.documentElement.scrollTop || document.body.scrollTop
             // 计算每一小段的距离
             let step = total/50;
             (function smoothDown () {
                 if (distance < total) {
                     distance += step
                 　　// 移动一小段
                     document.body.scrollTop = distance
                     document.documentElement.scrollTop = distance
                 　　// 设定每一次跳动的时间间隔为10ms
                     setTimeout(smoothDown, 10)
                 } else {
                 　　// 限制滚动停止时的距离
                     document.body.scrollTop = total
                     document.documentElement.scrollTop = total
                 }
             })()
         }

 

 

<li
    class="pull-left"
    v-for="(item,index) in navList"
    :key="item.index"
    @click="goAnchor('#anchor-'+index)">
    <span class="icon"></span>
    <p class="hot-article">#{{item.hotArticle}}#</p>
    <p>{{item.words}}</p>
</li>