vue回到顶部(常用)
vue回到顶部
·
1. 元素中绑定ref
<div ref="contentData"></div>
在需要回到顶部的地方加上此代码
this.$nextTick(() => {
this.$refs.contentData.scrollTop = 0
})
2. 浏览器回到页面顶部 window.scrollTo(0,0),页面滚动
window.scrollTo(options); options 是一个包含三个属性的对象:
top 等同于 y-coord
left 等同于 x-coord
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),
默认值auto,实测效果等同于instant
例子:
window.scrollTo( 0, 100 );
// 设置滚动行为改为平滑的滚动
window.scrollTo({
top: 1000,
behavior: "smooth"
});
3. 使用el-pagination实现翻页自动回到顶部
定义$scrollTo方法挂载在vue全局
// main.js
Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => {
window.scrollTo({
top: x,
left: y,
behavior: type // 滚动行为:smooth平滑滚动,instant瞬间滚动,默认值auto,等同于instant
})
}
// 使用方法
this.$scrollTo()
更多推荐
已为社区贡献1条内容
所有评论(0)