vue模拟锚点定位加动画

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

//模拟锚点跳转
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>

以上是 vue模拟锚点定位加动画 的全部内容， 来源链接： utcz.com/z/379899.html