深度揭秘：如何在单页应用（SPA）中完美保留路由切换滚动位置，提升用户体验！

摘要

现在很多网站和应用都使用单页应用（SPA）技术，用户在页面之间跳转时，页面不会整页刷新，而是通过路由动态切换内容。这种方式体验流畅，但有一个常见的问题：页面切换时，滚动位置默认会跳回顶部，用户在列表、文章页切换时体验就不太自然了。本文分享如何在 SPA 中实现路由切换时保留页面滚动位置，提升用户体验。

引言

随着前端框架如 Vue、React、Angular 等的发展，SPA 应用变得越来越普遍。它们的路由机制让页面跳转变得非常快，但也带来了滚动位置丢失的问题。

比如你在电商网站的商品列表页，往下滚了半屏，点开一个商品详情页，返回列表时却发现页面自动滚到了顶部，找不到之前看到的位置。这个时候如果能记住滚动条的位置，再切换回来时自动滚到之前的位置，用户体验会好很多。

所以，如何优雅地实现"路由切换时滚动位置的保存和恢复"，成为了前端开发的一个常见需求。接下来我会以 Vue Router 为例，讲解如何实现这个功能，并分享几个典型的应用场景。

路由切换时保留滚动位置的基本思路

原理分析

单页应用的路由切换，其实只是组件的挂载和卸载，浏览器不会触发传统页面刷新，滚动条不会自动保存位置。默认情况下，每次路由切换后页面滚动条位置都会重置。

所以解决方案很直观：

保存滚动位置 ：路由切换之前，先记录当前页面的滚动位置（通常是 window.scrollY 或者某个容器的滚动值）。
恢复滚动位置 ：路由切换之后，根据目标路由读取之前保存的滚动位置，调用 window.scrollTo(x, y) 还原滚动。

保存滚动位置可以存放在：

内存变量（简单且快速，但刷新会丢失）
sessionStorage（刷新保留，但需要序列化）
Vuex 或全局状态管理（复杂项目可以使用）

Vue Router 中的示例实现

这是一个简单的基于 Vue Router 的滚动位置保存和恢复示例：

js 复制代码

// 定义一个对象用来保存各个路由的滚动位置
const scrollPositions = {}

// 在路由切换前保存当前滚动位置
router.beforeEach((to, from, next) => {
  scrollPositions[from.fullPath] = window.scrollY || window.pageYOffset
  next()
})

// 路由切换后恢复滚动位置
router.afterEach((to) => {
  const pos = scrollPositions[to.fullPath] || 0
  window.scrollTo(0, pos)
})

这段代码的意思是：

切换路由时，先把离开页面的滚动位置保存到 scrollPositions 对象里，键是页面路径。
跳转到新页面后，检查之前是否有保存的滚动位置，如果有就滚回去，否则默认滚到顶部。

实际应用场景解析与代码示例

场景1：电商列表页与详情页切换

用户在商品列表页浏览，滚动一半后点击进入商品详情。详情页看完后返回列表页时，希望列表能回到之前的滚动位置，而不是跳回顶部。

示例代码：

js 复制代码

const scrollPositions = {}

router.beforeEach((to, from, next) => {
  if (from.name === 'ProductList') {
    scrollPositions[from.fullPath] = window.scrollY
  }
  next()
})

router.afterEach((to) => {
  if (to.name === 'ProductList') {
    const pos = scrollPositions[to.fullPath] || 0
    window.scrollTo(0, pos)
  } else {
    window.scrollTo(0, 0)
  }
})

代码说明： 只针对商品列表页保存滚动位置，避免内存占用过大。切换到其他页面默认滚顶部。

场景2：长文章阅读与目录切换

用户阅读长篇文章时，点击目录导航跳转到不同章节。希望目录切换时保留每个章节的滚动位置，方便回看。

示例思路：

每个章节对应一个路由。
保存每个章节的滚动位置。
路由切换时恢复对应章节的位置。

js 复制代码

const chapterScrollPositions = {}

router.beforeEach((to, from, next) => {
  chapterScrollPositions[from.fullPath] = window.scrollY
  next()
})

router.afterEach((to) => {
  const pos = chapterScrollPositions[to.fullPath] || 0
  window.scrollTo(0, pos)
})

场景3：使用自定义滚动容器的情况

有些 SPA 并不使用全局 window 滚动，而是在某个指定容器内滚动，比如一个固定高度的内容区。

这时滚动位置需要获取和设置容器的 scrollTop，而不是 window.scrollY。

js 复制代码

const scrollPositions = {}
const scrollContainer = document.getElementById('scroll-container')

router.beforeEach((to, from, next) => {
  scrollPositions[from.fullPath] = scrollContainer.scrollTop
  next()
})

router.afterEach((to) => {
  const pos = scrollPositions[to.fullPath] || 0
  scrollContainer.scrollTop = pos
})

Q&A

Q1: 有没有现成的路由库配置支持自动保存滚动位置？ Vue Router 有自带的 scrollBehavior 函数，可以自动处理，但有些场景需要手动保存复杂位置。React Router 需要自己实现。

Q2: 为什么不直接用浏览器的 history.state 保存滚动位置？ 有的浏览器支持，但兼容性不统一，且 SPA 自定义渲染导致状态管理更灵活，自己控制更可靠。

Q3: 切换路由后恢复滚动会有闪烁吗？ 有可能，尤其内容还没加载完时恢复位置会失败。可以考虑在内容加载完成后再恢复，或者用占位符减少闪烁。

总结

路由切换时保留滚动位置，是提升 SPA 用户体验的重要细节。基本思路就是保存切换前的滚动值，切换后恢复。实际项目中可以根据页面类型、滚动容器不同灵活调整。各大框架和路由库都提供了相关钩子或配置，可以结合使用。

希望这篇文章能帮你快速理解和实现滚动位置的保存与恢复，让你的 SPA 应用更流畅自然！如果你有其他问题，欢迎随时交流。