前端实战：如何让用户回到上次阅读位置
在阅读类、资讯类或博客网站中，记忆用户上次滚动到的位置并在下次访问时自动恢复，能显著提升用户体验。今天我们来探讨几种实现方案，从基础监听优化到 Intersection Observer API，再到 URL Hash 定位，帮你构建流畅且高效的方案。
总体思路
核心目标很明确：
- 在用户滚动时记录当前位置。
- 页面重新加载时恢复到记录的位置。
涉及的关键技术包括：
- scroll 事件监听
- localStorage 本地存储
- requestAnimationFrame 节流优化
- Intersection Observer API 观察元素进入视口
实现方案详解
1. 基础方法：监听滚动，记录 scrollTop
这往往是初学者的首选思路：实时记录 window.scrollY 并保存到 localStorage，加载时读取并 scrollTo 恢复。
但这种方法有个隐患：scroll 事件触发太频繁。高频滚动下每秒触发上百次很正常，简单的节流时间间隔可能无法应对快速滑动场景。这里推荐使用 requestAnimationFrame 进行节流，确保只在浏览器重绘前执行一次。
// 用于保存最新滚动位置
let lastKnownScrollY = 0;
// 用于控制 requestAnimationFrame
let ticking = false;
// 监听滚动事件
window.addEventListener('scroll', () => {
lastKnownScrollY = window.scrollY;
// 防止过度频繁存储，使用 requestAnimationFrame 节流
if (!ticking) {
window.requestAnimationFrame(() => {
localStorage.setItem('scrollPosition', lastKnownScrollY);
ticking = false;
});
ticking = true;
}
});
// 页面加载时，恢复之前保存的位置
window.addEventListener('DOMContentLoaded', () => {
const savedPosition = localStorage.getItem('scrollPosition');
if (savedPosition !== null) {
window.scrollTo(0, parseInt(savedPosition));
}
});
requestAnimationFrame是浏览器提供的用于执行高效动画的 API，它会在下一次重绘前调用指定的回调函数，确保动画与屏幕刷新率同步（通常为 60Hz），从而实现平滑效果，同时避免不必要的性能开销。相比scroll的高频触发，它起到了更好的节流作用。
2. Intersection Observer + 插入探针元素
Intersection Observer 在确定页面位置时效率更高，比 scroll 事件监听节省资源得多。但如果页面存在大块或杂乱元素，监听对象的选择就成了问题。
引入探针元素可以有效解决：只需一个小小的 div，设置为 visibility: hidden，不影响布局。它们就像哨兵，负责观察视口到了哪里。
（1）页面插入探针元素
在重要段落、章节、标题前插入隐形的小 div。
<article>
<div class="observer-marker" id="section-1"></div>
<h2>第一章 标题</h2>
<p>正文内容...</p>
<div class="observer-marker" id="section-2"></div>
<h2>第二章 标题</h2>
<p>正文内容...</p>
</article>
（2）设置 Intersection Observer
// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 如果探针元素进入可视区，记录它的 id
localStorage.setItem('lastVisibleSectionId', entry.target.id);
}
});
}, { threshold: 0.5 }); // 元素至少 50% 可见时触发
// 监听所有探针元素
document.querySelectorAll('.observer-marker').forEach(marker => {
observer.observe(marker);
});
// 页面加载时，恢复到上次记录的探针
window.addEventListener('DOMContentLoaded', () => {
const lastId = localStorage.getItem('lastVisibleSectionId');
if (lastId) {
const element = document.getElementById(lastId);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
});
3. 基于 URL Hash 锚点跳转
给每一节内容设置唯一 ID，用户阅读到某个位置时，自动更新 URL 的 hash（如 #id）。页面加载时，浏览器根据 hash 自动滚动到对应位置。这种方式甚至支持分享，因为位置信息保存在了 URL 里。
// 监听页面滚动，动态更新 URL Hash
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 动态替换地址栏 hash，不刷新页面
history.replaceState(null, '', `#${entry.target.id}`);
}
});
}, { threshold: 0.5 });
// 监听所有需要作为锚点的元素
document.querySelectorAll('.observer-marker').forEach(marker => {
observer.observe(marker);
});
// 页面刷新后，浏览器会自动滚动到 hash 对应的元素
总结
不同方案间对比总结
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| scrollTop 记录 | 通用、简单 | 粗糙、动态内容页面误差大 | 小型项目、静态页面 |
| Intersection Observer 探针 | 精准、性能好 | 要布置探针，稍复杂 | 长内容、章节型页面 |
| URL Hash 锚点 | 轻便、天然支持浏览器跳转 | 地址栏变化，需考虑 SEO | 文章分享、文档导航 |
结语
实现'回到上次阅读位置'不止一种方式，关键是根据项目特点选择：
- 内容简单 ➔
scrollTop就够了。 - 内容结构清晰 ➔
Intersection Observer是最佳。 - 需要分享/跳转 ➔ 用
URL Hash最自然。
真正优秀的细节体验，源自对用户行为的深刻理解和用心打磨。只有锻炼思维才能可持续地解决问题，希望这篇分享能给你带来一些启发。
