点击分页,回到顶部

简介: 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
  }
}
AI 代码解读

2、全局注入方法

回到顶部-2.png

3、使用

handleCurrentChange: function(page) {
    this.params.page = page
    this.tableData()
    this.goPageTop('.app-container')
}
AI 代码解读
目录
打赏
0
2
3
0
35
分享
相关文章
点击图片返回页面顶部的案例
点击图片返回页面顶部的案例
Fastadmin后台页面添加顶部按钮
操作的前提是需要在fastadmin框架中添加对应的控制器、模型、视图页面,可以手动创建,也可以使用curd一键生成。
301 0
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
164 1
前端一键回到顶部案例
|
10月前
404页面自动跳转源码
404页面自动跳转源码
133 10
如何实现“点击回到顶部”的功能?
如何实现“点击回到顶部”的功能?
225 0
(uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)
(uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)
670 0
(uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
软件测试面试题:在一个页面上,点击一个链接之后不会在当前页面上打开此链接而是新开一个窗口打开此页面。
软件测试面试题:在一个页面上,点击一个链接之后不会在当前页面上打开此链接而是新开一个窗口打开此页面。
164 0