前端实战：如何让用户回到上次阅读的位置？
在阅读类、资讯类、博客类网站中，记忆用户上次阅读到的位置，并在下次访问时自动滚动回那个位置，可以大大提升用户体验感。
今天我们就来详细讲一讲：前端如何实现用户回到上次阅读的位置，包括基础 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;
}
});
// 页面加载时，恢复之前保存的位置
.(, {
savedPosition = .();
(savedPosition !== ) {
.(, (savedPosition));
}
});
