核心思想就是：

1. 记录用户阅读的位置（如页面滚动位置、阅读章节 ID 等）

2. 在用户下次进入页面时还原位置

---

一、普通网页（文章、文档页面）

1. 记录滚动位置（scrollTop）

进入页面时恢复：

// 保存位置
window.addEventListener("beforeunload", () => {
  localStorage.setItem("scrollPosition", window.scrollY);
});

// 恢复位置
window.addEventListener("load", () => {
  const pos = localStorage.getItem("scrollPosition");
  if (pos) {
    window.scrollTo(0, parseInt(pos));
  }
});

👉 适合单页长文章。

---

2. 针对长文的段落/章节

如果文章很长，可以存 阅读到的段落 ID：

<p id="p1">第一段</p>
<p id="p2">第二段</p>
...

// 监听滚动，记录当前可见段落 ID
window.addEventListener("scroll", () => {
  const paragraphs = document.querySelectorAll("p[id]");
  for (let p of paragraphs) {
    const rect = p.getBoundingClientRect();
    if (rect.top >= 0 && rect.top < window.innerHeight / 2) {
      localStorage.setItem("lastParagraph", p.id);
      break;
    }
  }
});

// 页面加载时恢复
window.addEventListener("load", () => {
  const lastId = localStorage.getItem("lastParagraph");
  if (lastId) {
    document.getElementById(lastId)?.scrollIntoView();
  }
});

👉 这样可以直接跳到“上次读到的段落”。

---

二、单页应用（SPA，例如 React / Vue）

在 路由切换 时保存位置，在再次进入时恢复。

React Router 示例

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function useScrollRestoration() {
  const location = useLocation();

  useEffect(() => {
    const pos = sessionStorage.getItem(location.pathname);
    if (pos) {
      window.scrollTo(0, parseInt(pos));
    }

    return () => {
      sessionStorage.setItem(location.pathname, window.scrollY);
    };
  }, [location.pathname]);
}

👉 每个路由单独记忆滚动位置。

---

三、电子书/多章节阅读器

如果是 按章节阅读（比如小说、文档、PDF），可以记录 章节 ID + 位置：

{
  "chapterId": "ch5",
  "scrollY": 320
}

恢复时先跳转到章节，再滚动到位置。

---

四、注意事项

• 存储介质选择

  • localStorage：长期保存（用户关闭浏览器也保留）

  • sessionStorage：临时保存（关闭浏览器清除）

  • 数据量大或多设备同步，可以放到后端数据库（用户登录后保存）。

• 性能优化
  滚动事件触发频繁，最好做 节流/防抖，比如每 200ms 保存一次位置。

• 用户体验
  有时可以给提示：“是否回到上次阅读位置？” → 用户确认后跳转。

---

✅ 总结：

• 普通页面 → 存 scrollY 或段落 ID。

• SPA → 在路由切换时存储/恢复滚动。

• 阅读器/电子书 → 存章节 + 具体位置。