vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置

Nick.Ding

已于 2023-07-07 19:04:43 修改

阅读量822

点赞数

文章标签： vue.js javascript 前端

于 2023-07-07 18:25:48 首次发布

本文链接：https://blog.csdn.net/weixin_44133004/article/details/131602653

版权

想在每次页面切换后将el-scrollbar滚动条置顶，直接在router.afterEach中加入如下代码：
方法一：

router.afterEach(() => {
  const scrollContainer = document.querySelector('.el-scrollbar__wrap')
  if (scrollContainer) {
    scrollContainer.scrollTo({ top: 0 })
  }
});

方法二：

const router = createRouter({
  history: createWebHistory(),
  routes: newRouters,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        x: 0,
        y: 0
      }
    }
  }
})

经尝试，两种方式都起作用。
之后又遇到了新的问题，之前加入的返回组件居然不生效了，所以又改了一下返回组件代码，如下：

<div class="app-main">
	<el-scrollbar always>
	    <router-view />
	    <back-top />
	</el-scrollbar>
</div>


返回顶部组件：
// 加入target，并指定类即可
<el-backtop target=".app-main .el-scrollbar__wrap" :bottom="100" :visibility-height="showHeight">
  <div class="back-top">
    <i class="icon-back-top"></i>
  </div>
</el-backtop>