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>