前端保存并恢复用户上次阅读位置的几种做法

requestAnimationFrame 会在浏览器下一次重绘前调用回调，天然比'滚一下就存一次'更克制。它不是严格意义上的节流函数，但在这里很好用：滚动很密的时候，它能把多次更新压到一次绘制周期里，性能和流畅度都更平衡。

用 Intersection Observer 记录章节

如果页面是长文、文档或者分章节内容，单纯记像素位置会有点粗。内容一旦插图、异步加载或者首屏渲染不稳定，恢复位置就容易偏。

这时候更稳的办法是给每个章节前面放一个'探针'，观察它什么时候进入视口，再把这个章节 id 存下来。探针本身很轻，只要一个隐藏的 div，不会干扰排版。

在页面里插入探针

<article>
  <div id="section-1"></div>
  <h2>第一章 标题</h2>
  <p>正文内容...</p>
  <div id="section-2"></div>
  <h2>第二章 标题</h2>
  <p>正文内容...</p>
  <!-- 更多内容 -->
</article>

观察探针并恢复到对应位置

// 创建 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' }); // 平滑滚动到探针
    }
  }
});

这套方式比按像素记位置更适合结构化内容。代价也有：你得提前布置探针，或者在渲染时顺手给标题插入 marker。内容越规整，这种做法越省心。

把位置写进 URL hash

如果你希望'回到上次阅读位置'这件事还能分享给别人，hash 方案更顺手。思路也简单：给章节加唯一 id，阅读时动态更新地址栏 #id，刷新后浏览器会按 hash 自动跳过去。

// 监听页面滚动，动态更新 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 对应的元素

这个方案的优点很实在：位置是可见的，也能被复制和分享。缺点同样明显，地址栏会跟着变，某些页面还要考虑 SEO 和路由状态的兼容。纯文章页通常问题不大，复杂应用里就要多掂量一下。

怎么选

如果页面内容短、结构简单，我会先选 scrollTop。它足够快，改动也少。内容一长，或者中间有图片、广告位、懒加载组件，Intersection Observer 会更稳。要是还想顺带支持'复制链接继续读'，那就直接上 hash，省一次状态同步。

真正麻烦的其实不是'记住位置'，而是'内容变了以后还能不能回到差不多的位置'。这也是为什么长文场景里，按章节而不是按像素去恢复，通常更耐用。