2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

vue 滚动条实现平滑滚动到某个位置

滚动条实现平滑滚动vue滚动条作者:猿2048志愿者
方法一:引入jquery方法实现
import $ from 'jquery'


toTop: functi遇新是直朋能到分览on () {
  $('html, body').animate({scrollTop: 0}, 200)
  this.showdevIndxNav = true
},


方法二:计算scrollTop位置,延时逐段滑动------vue 2下面试验基本看不到平滑滑动的效果
http://blog.csdn.net/bbsyi/article/details/77897776


jump (index) {
        // 用 class="d_jump" 添加锚点
        let jump = document.querySelectorAll('.d_jump')
        let total = jump[index].offsetTop
let distance = document.documentElement.scrol中比需抖接朋功要朋插lTop || document.body.scrollTop // 平滑滚动,时长500ms,每10ms一跳,共50跳 let step = total / 50 if (total > distance) { smoothDown() } else { let newTotal = distan遇新是直朋能到分览ce - total step = newTotal / 50 smoothUp() } function smoothDown () { if (distan遇新是直朋能到分览ce < total) { distan遇新是直朋能到分览ce += step
       document.body.scrol中比需抖接朋功要朋插lTop = distance
document.documentElement.scrol中比需抖接朋功要朋插lTop = distance
setTimeout(smoothDown, 10) } else { document.body.scrol中比需抖接朋功要朋插lTop = total
document.documentElement.scrol中比需抖接朋功要朋插lTop = total
} } function smoothUp () { if (distan遇新是直朋能到分览ce > total) { distan遇新是直朋能到分览ce -= step
       document.body.scrol中比需抖接朋功要朋插lTop = distance
document.documentElement.scrol中比需抖接朋功要朋插lTop = distance
setTimeout(smoothUp, 10) } else {
document.body.scrol中比需抖接朋功要朋插lTop = total
document.documentElement.scrol中比需抖接朋功要朋插lTop = total
}
}
}
复制代码

本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:关于rem换算、移动端通过js控制动态控制rem宽高比的一个函数
» 下一篇:移动端_rem.js动态控制_适配
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段