前端实战：如何让用户回到上次阅读位置

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 最自然。

真正优秀的细节体验，源自对用户行为的深刻理解和用心打磨。只有锻炼思维才能可持续地解决问题，希望这篇分享能给你带来一些启发。