vue路由切换浏览器滚动条回到顶部

阿吧阿巴阿巴

已于 2022-10-10 16:05:40 修改

阅读量548

点赞数

文章标签： vue.js javascript 前端

于 2022-10-09 16:07:52 首次发布

本文链接：https://blog.youkuaiyun.com/z750467878/article/details/127228394

版权

本文介绍了两种解决路由跳转时滚动条保持在顶部的方法：一是直接在跳转代码后设置滚动位置；二是利用路由后置守卫实现全局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在工作中，发现路由跳转时，滚动条会停留在原始位置，用户体验感不好。

以this.$router.push方式的路由跳转为例：

方法一：逐个添加
- 1.直接在路由跳转代码的后面加两行代码：
方法二：路由后置守卫
- 1.在配置路由的文件中放置全局后置守卫:
介绍：Window.scrollTo()

方法一：逐个添加

1.直接在路由跳转代码的后面加两行代码：

document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

在这里插入图片描述

方法二：路由后置守卫

1.在配置路由的文件中放置全局后置守卫:

//全局后置守卫
router.afterEach(() => {
  window.scrollTo(0, 0)    //滚动条至于浏览器顶部
})

在这里插入图片描述

介绍：Window.scrollTo()

//语法：
window.scrollTo(x-coord,y-coord )
window.scrollTo(options)
//参数:
x-coord 是文档中的横轴坐标。
y-coord 是文档中的纵轴坐标。
options 是一个包含三个属性的对象:
top等同于y-coord
left等同于x-coord
behavior为滚动行为:smooth(平滑滚动),instant(瞬间滚动)