滚动行为配置
scrollBehavior(to, from, savedPosition)、平滑滚动、滚动到哈希位置，以及恢复滚动位置
滚动行为配置 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
控制导航时的滚动
在单页应用中，页面不会重新加载，因此浏览器不会替您重置滚动位置。Vue Router 的 scrollBehavior 函数可以让您决定每次导航后页面滚动到哪里。
它位于哪里
创建路由器时传入 scrollBehavior。它会在每次导航时运行。
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// return a position
}
})三个参数
它会接收 to（目标路由）、from（当前路由）和 savedPosition。只有通过浏览器后退或前进按钮导航时，最后一个参数才不为 null。
新路由滚动到顶部
最简单的行为是：每当用户导航到新页面时，都滚动到顶部。
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
}返回时恢复位置
当存在 savedPosition 时，返回它即可让后退按钮将用户带回之前的准确位置，与浏览器的原生行为一致。
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
return { top: 0 }
}为什么 savedPosition 很重要
如果不恢复 savedPosition，用户按下后退按钮时就会回到他们之前滚动过的长列表顶部。返回该位置可以保留他们原来的位置。
滚动到锚点
如果目标 URL 包含类似 #section 的哈希值，请返回一个 el 选择器，以滚动到对应元素。
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash }
}
return { top: 0 }
}平滑滚动
添加 behavior: 'smooth'，即可让滚动以动画形式进行，而不是瞬间跳转。
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, behavior: 'smooth' }
}
}为固定页眉设置偏移
粘性页眉可能会遮挡目标锚点。添加 top 作为偏移量，让元素停在页眉下方。
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, top: 80 }
}
}延迟滚动
如果内容是异步加载的，请返回一个 Promise，并在延迟后使用位置完成它，这样执行滚动时目标元素就已经存在。
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve) => {
setTimeout(() => resolve({ top: 0 }), 300)
})
}组合这些规则
完整的处理函数会优先使用已保存的位置，其次处理哈希锚点，最后默认滚动到顶部。
scrollBehavior(to, from, savedPosition) {
if (savedPosition) return savedPosition
if (to.hash) return { el: to.hash, behavior: 'smooth' }
return { top: 0 }
}快速检查
请测试您对滚动行为的了解。
回顾
scrollBehavior 控制导航时的滚动：
- 接收 to、from 和 savedPosition。
- 返回 savedPosition，以恢复后退按钮对应的位置。
- 返回 { el: to.hash }，以滚动到锚点。
- 对于前往新路由的全新导航，返回 { top: 0 }。
常见问题解答
「滚动行为配置」课时是免费的吗？
是的 — 「滚动行为配置」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「滚动行为配置」这节课中我会学到什么？
scrollBehavior(to, from, savedPosition)、平滑滚动、滚动到哈希位置，以及恢复滚动位置 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「滚动行为配置」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。