用 sessionstorage 恢复滚动位置是简单可靠的方案：离开前通过 beforeunload 事件保存 scrolltop，加载后在 domcontentloaded 时读取并 scrollto 恢复，spa 中需改用路由守卫。
在页面跳转后返回时恢复滚动位置，用 sessionStorage 是简单可靠的方案。核心思路是：离开前保存当前 scrollTop，进入时读取并滚动到对应位置。
监听页面卸载时机，保存滚动位置
在用户离开当前页（如点击链接、提交表单）前，把 document.documentElement.scrollTop 或 document.body.scrollTop 存入 sessionStorage。推荐监听 beforeunload 事件，它在页面即将卸载时触发，且兼容性好：
- 优先使用
document.documentElement.scrollTop，因为现代浏览器中它更准确反映实际滚动位置 - 如果
document.documentElement.scrollTop为 0，可回退到document.body.scrollTop（兼容旧版 IE） - 保存时建议加上页面标识（如当前
location.pathname），避免不同页面互相干扰
页面加载完成时恢复滚动位置
在页面 DOM 加载完成后（可用 DOMContentLoaded 或 window.onload），读取对应路径的缓存值，并调用 window.scrollTo() 恢复位置：
- 用
sessionStorage.getItem(key)获取之前保存的数值 - 确保数值有效（非
null、NaN或负数），再执行滚动 - 使用
scrollTo({ top: value, behavior: 'auto' })，避免动画干扰用户体验（尤其返回操作应快速精准） - 恢复后建议立即清除该键值，防止多次刷新或重复恢复
处理 SPA 路由切换的注意事项
若项目使用 Vue Router、React Router 等前端路由，beforeunload 不会触发。此时需改用路由守卫：
- Vue 中可在
beforeRouteLeave钩子中保存位置 - React Router v6 可用
useEffect监听location.key变化，在离开前保存 - 进入新路由时，在组件挂载或
useEffect中读取并滚动，注意防抖或延迟执行，确保 DOM 渲染完成
完整示例代码（适用于传统多页应用）
将以下代码放入页面底部或入口 JS 中即可生效：
// 保存滚动位置
window.addEventListener('beforeunload', () => {
const key = `scrollPos_${location.pathname}`;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
sessionStorage.setItem(key, scrollTop);
});
// 恢复滚动位置
window.addEventListener('DOMContentLoaded', () => {
const key = `scrollPos_${location.pathname}`;
const savedPos = sessionStorage.getItem(key);
if (savedPos && !isNaN(savedPos) && Number(savedPos) >= 0) {
window.scrollTo(0, Number(savedPos));
sessionStorage.removeItem(key);
}
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
