点击分页,回到顶部

简介: 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')
}
相关文章
|
前端开发
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
|
Web App开发 开发者
利用chrome控制台调试post请求
利用chrome控制台调试post请求
1064 0
|
6月前
|
人工智能 前端开发 JavaScript
前端如何借助 AI 工具提升开发效率
本文介绍了前端开发中如何借助AI工具提升效率,涵盖代码生成、数据处理与UI组件自动生成等应用场景,并结合实际案例展示AI在转换复杂数据格式和生成Element-UI表单中的实践效果,帮助开发者减少重复劳动,提高开发速度与准确性。
1080 0
|
Web App开发 JavaScript 前端开发
正确开启vue3.0调试工具vue-devtools
正确开启vue3.0调试工具vue-devtools
8019 2
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
4781 0
|
存储 缓存 Java
Java应用瘦身记:Docker镜像从674MB优化至58MB的实践指南
【10月更文挑战第22天】 在容器化时代,Docker镜像的大小直接影响到应用的部署速度和运行效率。一个轻量级的Docker镜像可以减少存储成本、加快启动时间,并提高资源利用率。本文将分享如何将一个Java基础Docker镜像从674MB缩减到58MB的实践经验。
865 1
|
设计模式 JavaScript 前端开发
原型链有哪些应用场景呢
【10月更文挑战第22天】原型链有哪些应用场景呢
460 1
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
10120 10
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
4221 0