应使用 sessionStorage 保存并还原 window.scrollY 值来实现局部刷新后滚动位置恢复，因其不依赖 DOM 元素 ID、可精确记录任意滚动位置、无需修改 URL 且兼容性好。
页面局部刷新（如 AJAX 更新部分内容）后，浏览器默认不会保留或恢复滚动到的锚点位置。要实现“刷新后回到原位置”，可借助 sessionStorage 在刷新前保存当前滚动偏移量（而非传统锚点 ID），刷新后再还原——这是更可靠、兼容性更好且无需修改 URL 的做法。
为什么不用 hash 锚点 + onhashchange？
传统 #section1 锚点依赖 URL 变化和浏览器自动滚动，但在局部刷新中：
- DOM 元素可能被重新渲染，原
id="section1"元素已销毁再重建，浏览器无法精准定位； - AJAX 更新不触发
hashchange，也无法捕获“刷新前”的真实可视位置； - 滚动位置常介于两个锚点之间（如用户手动拖动到中间），仅靠 hash 无法表达。
用 sessionStorage 保存并还原 scrollTop 值
核心思路：在局部更新发起前，记录当前 document.documentElement.scrollTop（或 window.scrollY），存入 sessionStorage；更新完成、DOM 就绪后，立即读取并调用 window.scrollTo() 恢复。
-
保存时机：在发送 AJAX 请求前，或点击触发刷新的操作回调开头（如按钮
onclick中）； -
保存内容：推荐用
window.scrollY（更语义清晰），兼容性与document.documentElement.scrollTop相当； -
还原时机：确保新 DOM 已插入并布局完成（可用
requestAnimationFrame或setTimeout(..., 0)延迟一帧）； -
键名建议：使用带页面上下文的 key，例如
scrollPos_${location.pathname}，避免多标签页干扰。
一个轻量实用的代码示例
假设你有一个按钮触发局部刷新 #content 区域：
立即学习“前端免费学习笔记（深入）”；
// 保存滚动位置
function saveScrollPosition() {
const key = `scrollPos_${location.pathname}`;
sessionStorage.setItem(key, window.scrollY.toString());
}
// 还原滚动位置（在新内容插入后调用）
function restoreScrollPosition() {
const key = `scrollPos_${location.pathname}`;
const pos = sessionStorage.getItem(key);
if (pos !== null) {
// 等待 DOM 重绘完成，避免滚动被覆盖
requestAnimationFrame(() => {
window.scrollTo(0, parseInt(pos, 10));
// 可选：清除，避免下次进入页面也跳转
sessionStorage.removeItem(key);
});
}
}
// 局部刷新逻辑（示例：fetch + innerHTML）
document.getElementById('refreshBtn').addEventListener('click', () => {
saveScrollPosition(); // 刷新前立刻保存
fetch('/api/content')
.then(r => r.text())
.then(html => {
document.getElementById('content').innerHTML = html;
restoreScrollPosition(); // DOM 替换后立即还原
});
});
注意事项与增强点
- 若页面有固定头部（header），还原后可视区域可能被遮挡，可在
scrollTo后加小偏移（如-60像素）补偿； - 移动端 Safari 对
scrollTo的即时性较敏感，requestAnimationFrame比setTimeout更稳妥； - 如需支持“前进/后退”导航中的位置记忆，应改用
history.state+popstate，但 sessionStorage 更适合单次局部刷新场景； - 避免在 SPA 路由切换时误用——此时应交由路由库（如 Vue Router、React Router）的 scroll behavior 控制。
