localStorage保存阅读进度的核心是滚动时算百分比、防抖写入、加载时优先锚点还原；公式为(window.pageYOffset + window.innerHeight) / document.documentElement.scrollHeight × 100，四舍五入至0.1%，以URL为键存percent、timestamp、anchorId，加载时先尝试anchorId滚动，失败再回退百分比估算。
用 localStorage 保存阅读进度，核心是“滚动时算百分比、防抖写入、加载时优先锚点还原”。它不依赖网络，刷新或关闭后数据仍在，适合做离线阅读器的进度记录。
阅读百分比怎么算才准
公式是：(window.pageYOffset + window.innerHeight) / document.documentElement.scrollHeight × 100。必须用 document.documentElement.scrollHeight，不用 body.scrollHeight，否则 CSS 重置后高度可能为 0 或偏小。结果用 Math.round(percentage * 10) / 10 四舍五入到 0.1%，避免浮点误差。如果页面有懒加载图片或动态内容，要在渲染完成后再计算，否则总高度不准，百分比会跳变。
怎么存进 localStorage 才合理
以当前页面 URL 作键名，值是一个对象，比如：
{'percent': 73.2, 'timestamp': 1715623400, 'anchorId': 'section-3'}这样既记了进度，又留了锚点线索，也方便后续加过期逻辑。写入前要做节流（例如 300ms 内只存一次），用 setTimeout 配合标志位就能实现；读取时用 JSON.parse(localStorage.getItem(key) || '{}')，并检查 percent 是否为有效数字，避免解析失败或空值导致滚动异常。
立即学习“前端免费学习笔记（深入）”；
页面加载后怎么回到上次位置
不要只靠百分比硬滚动——字体加载、图片占位、样式变动都会让文档高度变化，导致位置偏差。推荐两步走：
- 先尝试
document.getElementById(anchorId)?.scrollIntoView()，找到最近的标题 ID 并平滑滚动 - 若 ID 不存在或滚动失败，再按百分比估算：
window.scrollTo(0, percent / 100 * document.documentElement.scrollHeight)
这样兼顾准确性与容错性，用户几乎感觉不到跳动。
