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 作键名，值是一个对象，比如：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

{'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)

这样兼顾准确性与容错性，用户几乎感觉不到跳动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！