点击分页,回到顶部

简介: 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')
}
相关文章
|
9月前
|
JavaScript
点击图片返回页面顶部的案例
点击图片返回页面顶部的案例
Fastadmin后台页面添加顶部按钮
操作的前提是需要在fastadmin框架中添加对应的控制器、模型、视图页面,可以手动创建,也可以使用curd一键生成。
272 0
|
5月前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
118 1
前端一键回到顶部案例
若依的目录结构,有三种一种目录菜单,目录菜单,展开的都是页面的功能,不会跳转,第二种页面菜单,目录里面的一点击都是展示页面,第三种是按钮菜单,点击之后
若依的目录结构,有三种一种目录菜单,目录菜单,展开的都是页面的功能,不会跳转,第二种页面菜单,目录里面的一点击都是展示页面,第三种是按钮菜单,点击之后
若依如何创建二级页面菜单,点击目录后,右侧空白的悬浮空白的内容,点击系统管理的菜单管理,上级菜单点击主类木有个小三角,选择我们之前创建的主类目
若依如何创建二级页面菜单,点击目录后,右侧空白的悬浮空白的内容,点击系统管理的菜单管理,上级菜单点击主类木有个小三角,选择我们之前创建的主类目
|
8月前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
9月前
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
278 3
|
JavaScript 前端开发
右下角点击页面回顶部组件
右下角点击页面回顶部组件
77 1
右下角点击页面回顶部组件
如何实现“点击回到顶部”的功能?
如何实现“点击回到顶部”的功能?
204 0
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...