点击分页,回到顶部

简介: vue中用element组件时,点击分页后,当前页未滚动回顶部,我们可以强制让滚动的容器 scrollTop 为0

vue中用element组件时,点击分页后,当前页未滚动回顶部,我们可以强制让滚动的容器 scrollTop 为0

1、封装方法

回到顶部.png

// 点击分页,回到顶部
export function goPageTop(name) {

  let page = document.querySelector(name)
  if (page.scrollTop > 0) {
    page.scrollTop = 0
  }
}

2、全局注入方法

回到顶部-2.png

3、使用

handleCurrentChange: function(page) {
    this.params.page = page
    this.tableData()
    this.goPageTop('.app-container')
}
相关文章
如何设置控制台由底部展示改为右侧位置
这篇文章介绍了如何在Sublime Text编辑器中将控制台从底部展示改为右侧位置,通过使用Package Control来安装相关的插件来实现界面布局的调整。
|
6月前
|
JavaScript
点击图片返回页面顶部的案例
点击图片返回页面顶部的案例
Fastadmin后台页面添加顶部按钮
操作的前提是需要在fastadmin框架中添加对应的控制器、模型、视图页面,可以手动创建,也可以使用curd一键生成。
236 0
|
6月前
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
252 3
|
JavaScript 前端开发
右下角点击页面回顶部组件
右下角点击页面回顶部组件
63 1
右下角点击页面回顶部组件
如何实现“点击回到顶部”的功能?
如何实现“点击回到顶部”的功能?
119 0
|
JSON 小程序 JavaScript
小程序地图插入图标后 怎么实现点击图标弹出窗口
小程序地图插入图标后 怎么实现点击图标弹出窗口
97 0
Vant3—— 点击对应的name名称跳转到下一页对应的tab栏的name的位置
点击对应的name名称跳转到下一页对应的tab栏的name的位置
219 0
|
前端开发 开发者 容器
页面-顶部通栏 |学习笔记
快速学习 页面-顶部通栏
197 0
页面-顶部通栏 |学习笔记
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...