点击分页,回到顶部

简介: 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')
}
相关文章
|
8月前
|
JavaScript
点击图片返回页面顶部的案例
点击图片返回页面顶部的案例
Fastadmin后台页面添加顶部按钮
操作的前提是需要在fastadmin框架中添加对应的控制器、模型、视图页面,可以手动创建,也可以使用curd一键生成。
256 0
|
4月前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
77 1
前端一键回到顶部案例
|
8月前
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
267 3
|
JavaScript 前端开发
右下角点击页面回顶部组件
右下角点击页面回顶部组件
72 1
右下角点击页面回顶部组件
如何实现“点击回到顶部”的功能?
如何实现“点击回到顶部”的功能?
164 0
Vant3—— 点击对应的name名称跳转到下一页对应的tab栏的name的位置
点击对应的name名称跳转到下一页对应的tab栏的name的位置
242 0
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
|
小程序
小程序-点击按钮式 进行页面之间的跳转
小程序-点击按钮式 进行页面之间的跳转