可通过监听页面滚动事件并保存 scrollTop 到 localStorage/sessionStorage，页面加载时读取并恢复滚动位置来实现；需兼容不同文档模式、节流保存、关闭浏览器默认恢复、按路径区分存储键名，并在 SPA 中结合路由守卫手动处理。
可以通过监听页面滚动事件，将 scrollTop 值存入 localStorage 或 sessionStorage，页面加载时读取并恢复滚动位置来实现。
监听页面滚动并保存位置
在用户滚动页面时，实时记录 document.documentElement.scrollTop（兼容标准模式）或 document.body.scrollTop（兼容怪异模式），推荐统一用 document.scrollingElement?.scrollTop 或回退方案：
- 使用
document.scrollingElement最可靠，现代浏览器均支持 - 兼容写法：
const scrollTop = document.scrollingElement?.scrollTop || document.documentElement.scrollTop || document.body.scrollTop - 建议节流保存（如防抖 200ms），避免频繁写入存储
页面加载时恢复滚动位置
在 DOM 加载完成（DOMContentLoaded）或稍后时机，从存储中读取值并设置：
- 优先用
history.scrollRestoration = 'manual'关闭浏览器默认滚动恢复，避免冲突 - 恢复前可加
setTimeout(..., 0)或requestAnimationFrame，确保 DOM 渲染就绪 - 设置后建议再调用
window.scrollTo(0, savedTop)确保生效（部分场景 scrollTop 赋值不触发视图更新）
按页面路径区分存储键名
避免不同页面互相干扰，应基于当前 URL（如 pathname）生成唯一 key：
立即学习“Java免费学习笔记（深入）”；
- 例如：
const key = `scrollPos_${location.pathname}` - 若含查询参数且需区分，可用
location.href；若不需要，用location.pathname + location.hash更合理 - 返回上一页时，也可结合
performance.navigation.type === 1或history.state判断是否需恢复
处理单页应用（SPA）的额外注意
在 Vue/React 等框架中，路由切换不刷新页面，需在路由守卫或组件挂载/激活时手动恢复：
- Vue Router：在
beforeRouteEnter或onActivated中恢复 - React Router：在组件内 useEffect 监听 location 变化，匹配路径后恢复
- 恢复后建议清除对应 key（如离开页面时），或设置有效期防止长期残留
