如何让页面记住用户的滚动位置？

作为一名前端开发，我最近遇到了一个很实际的问题：我们的商品分析页面是一个很长的列表，用户经常需要滚动浏览大量数据。但每当用户点击某个商品查看详情后再返回时，页面总是会回到顶部，这让用户不得不重新滚动查找之前的位置。

问题出在哪里？

在单页应用(SPA)中，Vue Router在切换路由时默认不会记住滚动位置。这就导致了：

• 用户滚动到页面某个位置
• 点击进入详情页
• 返回时页面重置到顶部
• 用户需要手动重新滚动到之前的位置

这种体验很不好，尤其是对于需要频繁查看详情的用户来说，反复滚动会大大降低工作效率。

解决方案

1. 离开页面时保存滚动位置

使用Vue的路由守卫beforeRouteLeave来捕获并存储滚动位置：

beforeRouteLeave(to, from, next) {
  const scrollPosition = document.documentElement.scrollTop || window.scrollY
  localStorage.setItem('page_scroll_position', scrollPosition)
  next()
}

2. 返回时恢复滚动位置

当用户再次进入这个页面时，我们从存储中读取之前的位置并滚动到那里：

mounted() {
  // 从本地存储获取滚动位置
  const savedPosition = localStorage.getItem('product_list_scroll')
  if (savedPosition) {
    // 使用setTimeout确保DOM已经完全渲染
    setTimeout(() => {
      window.scrollTo(0, savedPosition)
    }, 0)
  }
}

3. 清理不再需要的数据

为了避免存储过期数据，我们在组件销毁时清理存储：

destroyed() {
  localStorage.removeItem('product_list_scroll')
}

使用localStorage相比sessionStorage，它能保证即使用户关闭浏览器再打开，位置信息也不会丢失。 setTimeout确保DOM完全渲染后再滚动，避免滚动失效。 清理机制能够防止存储的数据影响其他页面。使用这种办法以后操作可以更加流畅自然也减少了不必要的重复滚动，提升了整体使用体验。

在实际应用中，我们还发现了一些需要优化的地方：

多个标签页冲突：如果用户同时打开多个标签页，可能会互相覆盖存储的数据。解决方案是给每个页面添加唯一标识。

移动端兼容性：某些移动端浏览器对scrollTop的处理不同，需要额外测试。

动态加载内容：如果是无限滚动的页面，需要在数据加载完成后再恢复位置。

通过上述操作，当用户从列表页跳转到详情页再返回时，列表页可以读取 localStorage 中的值并恢复到之前的位置，用户就不需要重新滚动了。而当用户彻底离开这个功能区时，这个记忆又会被清除，非常人性化吗，实现了“智能”的滚动位置记忆功能。