【前端实战】如何让用户回到上次阅读的位置？
目录
2、Intersection Observer + 插入探针元素
作者：watermelo37
ZEEKLOG万粉博主、华为云云享专家、阿里云专家博主、腾讯云、支付宝合作作者，全平台博客昵称watermelo37。
一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。
---------------------------------------------------------------------
温柔地对待温柔的人，包容的三观就是最大的温柔。
---------------------------------------------------------------------
【前端实战】如何让用户回到上次阅读的位置？
在阅读类、资讯类、博客类网站中，记忆用户上次阅读到的位置，并在下次访问时自动滚动回那个位置，可以大大提升用户体验感。
今天我们就来详细讲一讲：前端如何实现用户回到上次阅读的位置，包括基础scroll方法+优化、 Intersection Observer API + 探针追踪、锚点 URL HASH 定位跳转等策略实现一个流畅且高效的方案。
一、总体思路
1、核心目标
在用户滚动时记录当前位置。
在页面重新加载时恢复到记录的位置。
2、涉及到的技术
可以根据下列技术进行知识补充，或者直接选择自己已经熟悉的技术来实现：
- scroll 事件监听
- localStorage 本地存储
- requestAnimationFrame 节流优化
- Intersection Observer API 观察元素进入视口
- Vue3 响应式组件（如果需要框架版本）
二、实现方案详解
1、基础方法：监听滚动，记录 scrollTop（不推荐）
在用户滚动时，实时记录 window.scrollY（页面滚动的垂直距离），保存到 localStorage 中。页面加载时，从 localStorage 读取，并 scrollTo 恢复。
这可能是很多人的第一直觉，但是这种方法存在一个问题，就是scroll事件触发太频繁了。高频滚动下每秒触发一百多次都是非常正常的情况，常规的节流方法也不合适，比如添加一个节流时间。因为滚动可以是一个非常快速的过程，一秒钟可能可以操作滚动条从顶到尾。所以这里选择使用 requestAnimationFrame 方法来节流。
// 用于保存最新滚动位置 let lastKnownScrollY = 0; // 用于控制 requestAnimationFrame let ticking = false; // 监听滚动事件 window.addEventListener('scroll', () => { lastKnownScrollY = window.scrollY; // 防止过度频繁存储，使用requestAnimationFrame节流 if (!ticking) { window.requestAnimationFrame(() => { // 将滚动位置保存在localStorage中 localStorage.setItem('scrollPosition', lastKnownScrollY); ticking = false; }); ticking = true; } }); // 页面加载时，恢复之前保存的位置 window.addEventListener('DOMContentLoaded', () => { const savedPosition = localStorage.getItem('scrollPosition'); if (savedPosition !== null) { window.scrollTo(0, parseInt(savedPosition)); } }); requestAnimationFrame 是浏览器提供的用于执行高效动画的 API，它会在下一次重绘前调用指定的回调函数，确保动画与屏幕刷新率同步（通常为 60Hz），从而实现平滑、流畅的视觉效果，同时避免不必要的性能开销。
它的执行频率比 scroll 要小一些，同时不滚动的时候也不会触发，相比与 scroll 的高频触发，起到了一个节流效果。
2、Intersection Observer + 插入探针元素
Intersection Observer在确定页面位置的时候有奇效，效率比scroll事件监听高了不止一星半点，但是如果存在大块、不宜分割或者杂乱的元素，那么监听元素的选择就会成为一个问题。
添加探针元素可以有效解决这个问题，探针元素只需要小小一个 div，可以设置为 visibility: hidden，不影响页面布局。他们就像一个个哨兵，负责观察你的视口到了什么位置。
（1）页面插入探针元素
可以在重要段落、章节、标题前插入隐形的小 div。
<article> <div></div> <h2>第一章 标题</h2> <p>正文内容...</p> <div></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 里面的。
是不是很熟悉？ZEEKLOG的目录跳转就是这么实现的。
// 监听页面滚动，动态更新 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对应的元素 三、总结
1、不同方案间对比总结
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
scrollTop 记录 | 通用、简单 | 粗糙、动态内容页面误差大 | 小型项目、静态页面 |
| Intersection Observer 探针 | 精准、性能好 | 要布置探针，稍复杂 | 长内容、章节型页面 |
| URL Hash 锚点 | 轻便、天然支持浏览器跳转 | 地址栏变化，需考虑SEO | 文章分享、文档导航 |
2、结语
实现回到上次阅读位置，并不只有一种方式，关键是根据你的项目特点选择：
- 内容简单 ➔ scrollTop 就够了。
- 内容结构清晰 ➔ Intersection Observer是最佳。
- 需要分享/跳转 ➔ 用 URL Hash 最自然。
总之，真正优秀的细节体验，源自对用户行为的深刻理解和用心打磨。
只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
其他热门文章，请关注：
极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
通过array.filter()实现数组的数据筛选、数据清洗和链式调用
通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能
TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急
通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制
深入理解 JavaScript 中的 Array.find() 方法：原理、性能优势与实用案例详解
el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能
前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver
JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、DOM操作等
高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
