Vue 路由跳转如何实现平滑滚动？scrollBehavior 配置项的使用指南

Vue Router 路由跳转如何实现平滑滚动？scrollBeha vior 配置项使用指南

想让 Vue 应用在路由跳转时，页面滚动也能丝滑过渡吗？这可不是魔法，核心就在于 Vue Router 的 scrollBeha vior 配置。它就像一个精准的导航员，能控制跳转后页面是回到顶部、停留在原处，还是直接定位到某个特定区块。关键在于，你需要正确地返回一个包含滚动坐标或元素选择器的对象，再配合一点 CSS 魔法，就能实现视觉上流畅的“平滑”效果。

基础用法：从返回一个坐标对象开始

配置其实很直观。在创建路由实例时，定义一个 scrollBeha vior 函数，让它返回你想要的滚动位置即可。来看看几个典型的例子：

• 返回 { top: 0 }：这是最常见的需求，每次路由跳转后，页面都会自动滚动到最顶端。
• 返回 { top: 100 }：页面会滚动到距离顶部 100 像素的位置。
• 返回 { el: '#main' }：页面会直接滚动到 ID 为 main 的那个元素顶部（这里支持使用 CSS 选择器，非常灵活）。
• 返回 { left: 0, top: 0, beha vior: 'smooth' }：这里多了一个 beha vior 字段。设置为 ‘smooth’ 就是显式告诉浏览器：“请用平滑动画的方式滚过去”。如果不设置，默认是 ‘auto’，也就是瞬间跳转，没有过渡效果。

保留滚动位置：巧用 sa vedPosition 参数

用户体验中有一个细节很重要：当用户点击浏览器的前进或后退按钮时，他们通常期望页面能回到之前浏览的位置。Vue Router 已经考虑到了这一点，它会将上一次的滚动位置通过 sa vedPosition 参数传递给你。你可以这样利用它：

• 如果 sa vedPosition 存在（不是 null），直接返回它，浏览器就会自动还原到之前的滚动位置。
• 如果是普通的编程式跳转（比如 router.push），这个参数会是 null。这时候，你就可以执行自己的逻辑，比如返回 { top: 0 }。
• 有个小提示：sa vedPosition 这个特性，通常只在 history 路由模式下，并且用户使用了浏览器的前进/后退按钮（即原生导航）时才有效。

滚动到锚点元素：结合 el 选择器和 offset 偏移

更常见的场景是，跳转到新页面后，需要自动滚动到某个具体的章节或标题，比如文章详情页的某个段落。这时，el 字段就派上用场了。它支持 CSS 选择器，还能配合偏移量进行微调。

立即学习“前端免费学习笔记（深入）”；

• { el: ‘.section-2‘, beha vior: ‘smooth’ }：页面会平滑滚动到第一个 class 为 section-2 的元素顶部。
• 如果页面有固定的导航栏，滚动到目标元素时可能会被遮挡。在 Vue Router 4.1+ 版本中，可以使用 offset 进行修正：{ el: ‘#contact‘, offset: { top: -80 } }，这样会在计算位置时向上偏移 80 像素。
• 对于不支持 offset 的旧版本，可以手动计算：document.querySelector(el).offsetTop - 80，效果是一样的。

不可或缺的 CSS：启用全局平滑滚动

这是最容易忽略但至关重要的一步。你在 scrollBeha vior 里设置了 beha vior: ‘smooth’，这只是发出了指令。要让浏览器真正执行平滑滚动，必须在根元素上启用这个行为。

• 需要在全局样式文件（比如 App.vue 的 style 标签，或者项目的 main.css）中添加一行：html { scroll-beha vior: smooth; }。
• 注意，只设置 body 是无效的，必须作用于 html 元素。
• 好消息是，这个 CSS 属性在现代主流浏览器（Chrome 61+、Firefox 36+、Safari 15.4+）中都有很好的兼容性。

总结一下，实现完美的路由滚动控制，其实是一个“三合一”的协作：scrollBeha vior 函数负责返回目标位置、全局 CSS 为滚动提供平滑能力、而 sa vedPosition 的判断则照顾了浏览历史。三者配合，才能打造出既流畅又符合用户预期的浏览体验。