做过前端的人基本都遇到过这个需求用户正在读一篇长文或者往包裹列表里划了几百个商品一不小心碰了刷新按键或者点了链接切走再返回结果页面“咻”的一下回到了顶部刚才的位置全没了。这个体验有多糟糕相信不用我多说。而“前端页面中如何让用户回到上次阅读的位置”这个看似简单的功能实际上藏着不少细节——滚动事件节流、渲染时序、SPA路由切换、键盘弹起、图片加载导致的视口高度变化都是坑。这篇文章就把我实际项目里用过的方案、踩过的坑、以及最终沉淀下来的通用做法一起梳理出来希望能帮到同样在折腾滚动位置恢复的开发者。这个需求适合的场景很广文章详情页、问答列表、电商商品列表、信息流、聊天记录甚至是一个很长的表单。不管你是用原生JS、Vue还是React核心思路是相通的。文章我会从需求拆解讲起然后给出具体的代码实现最后聊聊你上线后可能会遇到的那些诡异问题。1. 需求拆解与方案选型1.1 先想清楚“回到上次阅读位置”到底指什么很多开发看到“回到上次阅读位置”第一反应就是“把scrollTop存起来下次进来再设置回去”。这个思路大方向没错但实际做之前必须搞清楚你到底要覆盖哪些场景。我习惯把需求拆成三个等级同页面刷新恢复用户在页面A读到一半按F5或浏览器刷新刷新后要停留在原来的位置。离开后返回恢复用户从列表页点进详情页再返回列表页时列表要停留在之前滚动到的位置。这里包括浏览器的前进后退也包括SPA内部路由跳转。跨会话恢复用户今天读了半截关掉浏览器明天重新打开还想接着读。这个需求相对少见需要存持久化存储而且要处理内容可能已经变化的问题。这三个等级对应的技术方案和成本完全不同。如果产品没明确说建议你做需求调研的时候先问清楚别一上来就上最重的方案。实际中90%的需求是前两种第三种一般出现在阅读类App或收藏夹场景Web端做得比较少。还有一点很多人会忽略“阅读位置”不一定只是window.scrollY。如果滚动容器是一个内层div比如聊天窗口、后台系统的可滚动面板那记录的是那个容器的scrollTop而不是页面的滚动高度。同时如果是横向滚动还要考虑scrollLeft。一切开始之前最好先和测试确认一下是只恢复纵向位置还是横纵都要。1.2 备选方案一览与选型逻辑我把市面上能用的方案和各自的适用场景整理成了一张表供你参考方案原理优势劣势适合场景浏览器原生滚动恢复scrollRestoration history浏览器自动记录每个history entry的滚动位置零代码成本不可控经常失效样式和异步加载会干扰仅靠浏览器默认行为可作为兜底锚点hash页面URL带#锚点加载后自动跳转极简、可分享只适用于有id的元素不支持动态列表精确位置锚点本身有跳转抖动文章目录跳转、内容分页sessionStorage/localStorage存储scrollTop滚动事件中节流记录滚动值下次加载后恢复全可控跨刷新有效需要手动处理存储读取、时机和清理同页面刷新恢复、跨会话恢复history.state / URL参数利用history.state记录滚动位置SPA返回时恢复与路由状态耦合可随浏览器前后退恢复history.state有大小限制且需要监听popstate列表页与详情页之间的返回恢复IntersectionObserver 记录可视元素id监听哪个元素进入视口存其标识可恢复“阅读位置”而不仅是像素值实现复杂依赖元素结构稳定长文阅读按章节或段落位置恢复实际项目里我不会只用一种方案而会根据需求组合使用。比如一个内容社区App的移动端H5我同时做了三件事开启浏览器的scrollRestoration auto作为基础兜底在同页面的滚动容器上用sessionStorage做节流记录和恢复在列表页返回时用history.state保存列表滚动位置并在路由切换或popstate时恢复。这样每一层解决一类问题互不干扰。下面我把每个环节的实现细节和容易踩的坑展开了说。2. 几个核心实现细节与原理2.1 不要忽略浏览器自己的“滚动恢复”现代浏览器本身是带滚动位置记忆能力的。你在Chrome里打开一个长页面往下滚一段按F5会发现浏览器很贴心地把你放回了原来的位置。这个行为由history.scrollRestoration控制默认值是auto。但为什么很多情况下它不生效原因主要有几个页面内容由JS异步渲染浏览器恢复滚动位置时DOM还没有足够的高度它只能恢复到目前还能滚到的最大值比如0等数据渲染完已经错过了恢复窗口页面在iframe中或者某些特殊滚动容器浏览器不会自动记录开发者调用了window.scrollTo之类的操作或者DOM结构发生剧烈变化干扰了浏览器的判断。所以我的建议是自己实现一套记录和恢复逻辑同时把scrollRestoration设为auto作为兜底。别设置成manual因为如果你自己的逻辑在某些边界情况挂掉了至少浏览器还能救一下。代码如下if (scrollRestoration in history) { history.scrollRestoration auto; }这行代码放在页面初始化早期执行即可。注意如果你用了自己的恢复逻辑且不希望浏览器在恢复时和你抢位置也可以设为manual但那样你就要保证你自己的逻辑足够强壮。实践中我建议保留auto因为一般浏览器恢复发生在页面加载前几个事件如果你的JS恢复逻辑在DOMContentLoaded之后异步执行两者有可能产生“先到顶部再跳下去”的闪烁这个可以通过调整恢复时机来解决后面实操部分会讲。2.2 滚动监听要节流但要选对节流方式我们自己的恢复方案核心是“记录位置”。最简单的写法就是监听scroll事件然后把scrollTop存起来window.addEventListener(scroll, () { sessionStorage.setItem(scrollPos, window.scrollY); });这么写问题很大scroll事件一秒钟可能触发几十上百次每次都写sessionStorage不仅性能差而且移动端会明显卡顿。所以我都会加节流。这里有两个方向throttle节流和debounce防抖。throttle固定频率执行比如每200ms记录一次。debounce停止滚动一定时间后执行一次。我推荐滚动记录用节流而不是防抖。因为防抖只有在用户停下来之后才记录如果用户一直不停划可能几秒内继续滚动突然没来得及记录就切走了位置就丢了一截。节流可以保证每隔一小段时间就记录一次数据是持续刷新且相对新的。节流的实现我一般不用lodash自己写一个简单的function throttle(func, delay) { let last 0; return function(...args) { const now Date.now(); if (now - last delay) { last now; func.apply(this, args); } }; } const recordScroll throttle(() { sessionStorage.setItem(scrollPos, String(window.scrollY)); }, 200); window.addEventListener(scroll, recordScroll);节流间隔我个人用200ms实际上不用太短因为恢复位置本来就是粗粒度的用户不会感知到1像素的差异。2.3 恢复时要处理异步渲染和图片加载的时序这是整个功能里最容易出问题的一环。假设你存好了scrollY8000页面重新加载后执行恢复window.scrollTo(0, 8000);如果此时页面内容还没渲染出来总高度只有3000px那么浏览器只能滚到3000。等异步数据到了高度变成了15000位置又变成只有3000妥妥的失败。正确的做法是在内容渲染完成并且计算出目标高度之后再设置滚动位置。有几种策略如果是首屏初始化数据可以在数据请求的then之后执行恢复用requestAnimationFrame多次尝试直到文档高度大于目标位置监听页面load事件包括图片等资源加载恢复通常在其后执行。我的做法是写一个通用的恢复函数function restoreScroll(targetScrollTop) { if (!targetScrollTop) return; const maxScroll () document.documentElement.scrollHeight - window.innerHeight; // 如果目标位置超出了当前可滚动的最大值就多等几帧再试 let retries 0; const tryScroll () { if (retries 20) return; // 最多等2秒左右 if (maxScroll() targetScrollTop) { window.scrollTo(0, targetScrollTop); } else { retries; requestAnimationFrame(tryScroll); } }; tryScroll(); }这个函数会持续用requestAnimationFrame检查每帧大约16ms20帧大概是320ms如果320ms后内容还没出来就会放弃。实际项目中可以根据数据加载情况调整重试次数。更稳妥的方式是在数据渲染完成后的生命周期里直接调用恢复然后把上面的函数作为兜底。注意如果你的页面里有图片图片加载会撑开高度scrollHeight也会变化。这种场景下比较靠谱的恢复时机是监听图片的load事件在所有图片加载完成后再次确认位置或者直接监听window.load事件这个事件会等待所有子资源加载完成。但对列表页来说很多时候图片是懒加载的你不希望为了恢复位置而等待所有图片加载完那太慢了。所以更实用的策略是先滚动到存储的位置随后当图片加载导致布局偏移时用scrollTo来纠正。这里要小心如果图片本身是异步加载且改变了上方内容的高度只靠一次scrollTo是不够的。可以采用“视觉稳定”策略window.scrollTo(0, savedPos); // 图片加载完后再对齐一次 document.querySelectorAll(img).forEach(img { if (!img.complete) { img.addEventListener(load, () { window.scrollTo(0, Math.min(savedPos, document.documentElement.scrollHeight - window.innerHeight)); }, { once: true }); } });这种方式会增加不少监听器的开销建议只在阅读类页面尤其是大量长图的文章使用列表页一般不需要。2.4 刷新场景使用sessionStorage注意键的设计同页面刷新用sessionStorage是最合适的。它只在当前标签页存在关闭标签页就自动清除不会留下垃圾数据。但有几个细节要注意存储的键名要有作用域。一个项目可能有多个页面都做滚动恢复如果都用scrollPos这个键就会互相覆盖。我习惯用page-scroll-${location.pathname}当键名这样不同路由之间天然隔离。刷新时原始存储的数据是上一次会话的不能无限期使用。我们只需要“最近一次”的位置刷新后恢复完要不要清除分情况如果你希望用户每次刷新都回原位不要清如果你只希望刷新一次回到原位以后再刷新就回顶部有些内容场景希望强制每次刷新从顶部开始那恢复后可以移除。存储的数据最好用字符串或数字都行因为sessionStorage只能存字符串读取后要parseFloat再使用。让我给个完整示例const KEY page-scroll-${location.pathname}; // 读取 const saved sessionStorage.getItem(KEY); const targetScrollTop saved ? parseFloat(saved) : 0; // 记录时要注意如果用户主动滚到顶部了应该记录0并且这个0也要存 function recordScroll() { sessionStorage.setItem(KEY, String(window.scrollY)); } window.addEventListener(scroll, throttle(recordScroll, 200));这里还有个小坑用户如果一下子滚回顶部window.scrollY变成0我们要不要更新存储要因为“回到顶部”本身也是一个有效的阅读位置。如果你不更新下一次刷新还是回到旧位置用户会非常困惑。2.5 列表页返回的常见做法history.state 与 popstate对于“列表页 - 详情页 - 返回列表页”的场景sessionStorage也能用但更多时候我使用history.state。原因是它和作用域绑定得更自然每个历史条目自带一个state对象返回时通过popstate事件读取不会和其他标签页或路由的数据混淆。实现思路如下用户点击列表项进入详情页之前把当前的滚动位置存到history.state里。在SPA的路由跳转或者直接修改URL时将state与新的URL关联。当用户通过浏览器的返回按钮或者调用history.back()返回时会触发popstate事件此时读取state中的滚动位置恢复。代码模板// 列表页进入详情前把滚动位置记到state对象上 function goToDetail(itemId) { history.replaceState({ scrollPos: window.scrollY, ...window.history.state }, , location.href); // 然后做详情页跳转比如 location.href /detail/${itemId} } // 返回时监听popstate window.addEventListener(popstate, (event) { if (event.state event.state.scrollPos) { restoreScroll(event.state.scrollPos); } });但这里有个大前提你的SPA路由必须和historyAPI正确配合。如果你用的是Vue Router或React Router通常路由切换时浏览器会自动创建新的history记录并且你可以在beforeRouteLeave或路由守卫里写入当前滚动位置。以Vue Router为例// 在列表页组件中 beforeRouteLeave(to, from, next) { // 记录离开时的滚动位置保存到当前route的state中 history.replaceState({ scrollPos: window.scrollY }, , location.href); next(); }而返回后的恢复可以在列表页的mounted或activated如果用了keep-alive里执行activated() { const state history.state; if (state state.scrollPos) { this.$nextTick(() { window.scrollTo(0, state.scrollPos); }); } }这里我在实际项目里踩过的最大的坑是Vue Router默认滚动行为是回到顶部。如果你没有配置scrollBehavior返回列表页时它会被路由强行滚到顶部然后再执行我们的恢复逻辑出现先跳到顶部再跳回原位的闪烁。所以如果你用Vue Router需要把scrollBehavior配置成返回时用保存的位置或者直接返回false禁用默认行为const router new VueRouter({ routes, scrollBehavior(to, from, savedPosition) { // 如果浏览器原生支持并保存了位置就返回保存的位置 if (savedPosition) { return savedPosition; } // 或者返回我们希望恢复的位置 return false; } });这个scrollBehavior除了原生支持外还可以配合history.state使用见后面的实操部分。3. 实操过程与核心环节实现3.1 实战一个原生JS的文章详情页刷新恢复假设我们有一个文章详情页页面结构是标准的内容由接口异步渲染。要实现在这个页面刷新后用户能看到之前阅读到的位置。第1步统一封装滚动存储工具我习惯把滚动记录的存取封装成一个小的工具模块这样在多个页面复用不会因为复制粘贴漏掉细节。// scroll-store.js const THROTTLE_DELAY 200; function getKey() { // 以当前页面路径作为键保证不同页面不冲突 return scroll-pos-${location.pathname}; } function throttle(fn, delay) { let last 0; return function(...args) { const now Date.now(); if (now - last delay) { last now; fn.apply(this, args); } }; } export function recordScrollPosition() { if (typeof window undefined) return; window.addEventListener(scroll, throttle(() { sessionStorage.setItem(getKey(), String(window.scrollY)); }, THROTTLE_DELAY)); } export function restoreScrollPosition() { if (typeof window undefined) return; const saved sessionStorage.getItem(getKey()); if (!saved) return; const target parseFloat(saved); // 这里我们用 rAF 循环等待文档高度达到目标 let maxAttempts 50; const attempt () { if (maxAttempts 0) return; const maxScroll document.documentElement.scrollHeight - window.innerHeight; if (maxScroll target) { window.scrollTo(0, target); // 恢复后建议保留sessionStorage这样用户再次刷新也还能恢复 // 如果想“一次性”恢复就 sessionStorage.removeItem(getKey()); } else { maxAttempts--; requestAnimationFrame(attempt); } }; attempt(); }第2步在文章数据渲染完成后再执行恢复上面工具里的restoreScrollPosition用的是rAF轮询但更好的是在业务代码里明确“数据渲染完了再恢复”。比如用fetch加载文章内容(async function initArticle() { const res await fetch(/api/article/123); const data await res.json(); // 渲染正文 document.getElementById(content).innerHTML data.content; // 渲染完再恢复位置 restoreScrollPosition(); // 记录滚动注意这里要等渲染完成后绑定监听否则空的滚动高度记录没有意义 recordScrollPosition(); })();第3步体验细节打磨这里有几个提升体验的小细节如果用户刷新时页面正在顶部恢复位置其实是0刷新后也应该在顶部这没问题。如果用户主动滚动到某一个锚点位置下次刷新时我们希望回到的是锚点位置还是自己记录的位置通常是自己记录的位置。恢复时不要用一个“从顶部平滑滚动到目标位置”的动画否则用户会看到页面先自动滚动一段距离造成困惑。恢复位置应该瞬间完成window.scrollTo({ top: target, behavior: instant // 部分浏览器仍可用也可直接 window.scrollTo(0, target) });smooth动画仅用在新链接跳转的锚点场景滚动恢复永远不要用。3.2 实战Vue 3列表页与详情页之间的位置记忆我们来写一个经典的Vue 3 Vue Router的列表页返回场景。列表页有一段商品列表用户滚到一半点击某个商品进入详情页然后返回列表页列表需要停留在刚才的位置。这里我直接用onBeforeRouteLeaveonMounted的组合并且利用history.state。列表页组件template div classproduct-list ProductCard v-foritem in productList :keyitem.id clickgoDetail(item.id) / /div /template script setup import { onMounted, nextTick } from vue; import { onBeforeRouteLeave, useRouter } from vue-router; const router useRouter(); function goDetail(id) { // 记录滚动位置到当前路由的state history.replaceState({ ...(history.state || {}), listScrollPos: window.scrollY }, , location.href); router.push(/detail/${id}); } onBeforeRouteLeave(() { // 如果在组件内用onBeforeRouteLeave离开前再次更新确保最新的位置 history.replaceState({ ...(history.state || {}), listScrollPos: window.scrollY }, , location.href); }); onMounted(async () { // 等列表渲染完成可能是已经缓存的keep-alive也可能是重新请求数据 await nextTick(); // 尝试从history.state中恢复 const savedPos history.state?.listScrollPos; if (savedPos) { window.scrollTo(0, savedPos); } }); /script如果列表数据是通过接口动态获取的需要把恢复放在数据返回之后const productList ref([]); onMounted(async () { const data await fetchProductList(); productList.value data; await nextTick(); const savedPos history.state?.listScrollPos; if (savedPos) { // 还需要再等一下确保DOM有高度 window.requestAnimationFrame(() { window.scrollTo(0, savedPos); }); } });还要处理路由的默认滚动行为。在路由配置里const router createRouter({ history: createWebHistory(), routes, scrollBehavior(to, from, savedPosition) { // 如果浏览器原生有savedPosition返回它 if (savedPosition) { return savedPosition; } // 否则回到顶部或者可以加自己需要的hash锚点逻辑 return { top: 0 }; } });注意savedPosition是浏览器原生给的历史记录里的位置和我们用history.replaceState存的listScrollPos不是同一个东西。savedPosition会在浏览器自带行为保留下产生如果浏览器没记住就不存在此时我们的自定义state就会起作用。3.3 实战虚拟滚动列表的特殊处理列表很长使用了虚拟滚动比如vue-virtual-scroller、react-window恢复位置比普通列表要做更多工作。因为虚拟滚动只渲染可视区域附近的DOM滚动位置和文档高度之间的关系不再是线性的直接window.scrollTo(0, savedTop)会导致渲染的起始索引不对列表会出现空白或者跳跃。这种情况我建议用滚动容器的scrollTop恢复 渲染偏移修正或者更简单一点在虚拟列表的数据被重新加载后先计算目标索引再通过虚拟列表实例提供的scrollToIndex来恢复。以react-window为例// 假设你已经保存了滚动位置 scrollTop同时保存了可见列表的高度和起始索引 // 恢复时 const listRef useRef(); if (savedState) { // 方式一直接用scrollTo listRef.current.scrollTo(savedState.scrollOffset); // 方式二如果你存的是起始索引可以scrollToItem // listRef.current.scrollToItem(savedState.startIndex, start); }如果虚拟列表组件没有暴露scrollTo方法也有办法既然是虚拟滚动本质上记录的是“第一个可见元素对应的数据索引”。你可以监听虚拟列表的visibleRangeChange事件拿到startIndex存起来恢复时让虚拟列表重新渲染到那个索引。但这依赖具体组件库的API得看文档。核心建议虚拟滚动别用滚动高度硬切要结合组件自身的恢复API否则你会陷入“数据没加载完、高度为0、恢复失败”的死循环。3.4 记录滚动位置时别忘了这些“不应该记录”的时刻有时候我们会把滚动位置存错。常见的错误源包括弹层/弹窗滚动页面背后没动弹层内部在滚。如果你用全局监听window记录到的是背景的位置没毛病但如果你监听的是弹层的容器就要注意是否会把弹层的位置和主页面位置混在一起。iOS橡皮筋效果移动端当滚动到顶部或底部时继续拖拽scrollY会变成负值或在惯性滚动下短暂不更新。节流函数要忽略负值。浏览器地址栏收起移动端地址栏或刘海屏工具栏收起和展开时视口高度变化window.scrollY会被浏览器自动调整这通常是OK的但如果你在某些时刻读取位置可能读到不该有的值。所以我一般会在记录函数里做一层“数值合法性”的检查const y window.scrollY; if (y 0) return;4. 常见问题与排查技巧实录4.1 明明存了scrollTop刷新后还是回到顶部这个问题排在所有问题的第一位。排查顺序如下第一看存储有没有写入。打开DevToolsApplication - Session Storage看对应路径下的键值是否在滚动时持续更新。如果没有说明scroll事件没绑上或者节流函数没生效。我经常遇到的是组件销毁时忘了移除监听或者事件绑定在了一个元素上但页面实际滚动的是window。第二看恢复函数是否执行。在restoreScrollPosition里打一个console.log看页面加载后是否会走到。如果没走到大概率是数据渲染未完成时函数已经执行完了或者被路由的scrollBehavior抢先滚到顶部。日志检测时注意控制台输出的时机别被异步迷惑。第三看目标值是否大于0。很多人在sessionStorage.getItem后用if (saved)判断如果存的是0会被判断为真但如果存的是就会被跳过。我建议统一用saved null || saved undefined来判断是否有值。第四看页面高度是否够。就像前面说的如果恢复时代码已经执行但DOM高度不足以滚动到目标值scrollTo不会报错但实际效果是“滚到了一个比目标小的最大值”。解决办法就是延迟恢复或者用rAF多次尝试。下面这个例子经常出现在我接到的求助里// 错误写法在DOMContentLoaded里直接恢复 document.addEventListener(DOMContentLoaded, () { const saved sessionStorage.getItem(pos); if (saved) window.scrollTo(0, saved); });这种写法在数据量大、渲染有延迟的页面基本无效。要改成数据渲染完成后恢复。4.2 恢复后位置正确但几秒钟后又跳走了这种情况多半发生在图片或者异步组件加载导致页面高度变化后浏览器或者我们自己代码里的某段逻辑又把滚动位置修改了。常见原因图片未加载时恢复了位置图片加载后上方元素高度变大把当前视口“推”到了错误的位置页面里某处代码在mounted或watch里调用了window.scrollTo(0,0)比如某些UI组件初始化时强制回顶部路由的scrollBehavior返回了{top:0}在异步路由组件解析完成时执行了比你的恢复逻辑晚。解决方法如果确认是图片导致的写一个小工具在恢复后主动监听DOM内图片load并再次修正如果是UI组件或路由导致的需要检查执行优先级。我的做法是一个原则恢复位置必须在所有可能改变页面高度和滚动位置的操作都完成之后才执行。如果在Vue里就放在nextTick 数据渲染之后在React里放在useEffect首屏数据ready之后实在不行用setTimeout(0)或rAF排队到当前同步任务末尾。4.3 SPA路由切换时位置被浏览器“不请自来”地恢复有时你在SPA里做router.push浏览器会像历史记录一样自动尝试恢复滚动位置。如果你的页面内容渲染得很快浏览器可能也会很快恢复出上一次的位置这个位置可能不是当前页希望的位置。解决办法是设置scrollRestoration manual并完全接管滚动管理。但手动接管后必须把列表页、详情页、回到顶部等所有滚动行为都处理好否则会出现很多其他问题。我个人的折中方案是在SPA的入口处先记录并取消浏览器的自动恢复再用自己的逻辑恢复。例如在created或beforeEach里设history.scrollRestoration manual然后在各个路由组件里用上面提到的history.state方案恢复。4.4 移动端键盘弹起导致位置“被挤走”在H5表单页面用户正在输入框填写时软键盘弹出视口高度变化浏览器常常会把页面滚动到输入框位置。此时如果你也在监听滚动会记录到一个因键盘弹起而改变的位置下一次刷新如果恢复到那个位置用户的页面可能不在预期的地方。这种情况我建议在输入框聚焦和失焦时暂停记录或者记录时判断当前是否在编辑状态let isEditing false; document.addEventListener(focusin, () { isEditing true; }); document.addEventListener(focusout, () { isEditing false; }); // 在记录函数里 if (isEditing) return;这个技巧特别适合表单页和评论输入框场景。整体思路上我们要尽最大可能判断“这个滚动位置是用户主动阅读的位置还是UI造成的被动偏移”。4.5 列表返回后白屏或列表未渲染如何恢复一种很常见的情况从列表页进入详情页列表页被路由销毁数据也清空了。返回列表页时组件重新创建数据需要通过接口重新拉取此时如果直接恢复scrollY页面列表还没渲染就会白屏。解决办法是在数据渲染完成后恢复这是前面强调过好几次的。实际中我还会在这类列表组件里用keep-alive或v-show不让列表组件销毁这样列表数据还在内存里返回时可以立刻恢复滚动位置。但要注意使用了keep-alive之后滚动位置其实还在无需额外恢复但如果你在详情页里修改了列表状态返回时可能想要一个刷新后的列表就需要权衡了。如果既要保留滚动位置又要刷新列表数据可以这样列表组件用keep-alive包着但在返回时重新请求数据并保留旧数据直到新数据返回。这样可以先恢复旧列表和位置数据更新后再修正。4.6 关于“文章阅读位置按段落恢复”的方案如果产品经理要求更高的精度比如“用户读到第3章了刷新后帮他定位到第3章开头”而不是像素位置可以考虑基于内容的标识符。做法是给每个段落或文章中的关键节点加上id或>// 标记段落 document.querySelectorAll(article section).forEach((section, index) { section.dataset.pos index 1; }); // 用IntersectionObserver把当前可见区上方的dom id保存下来 let currentPos null; const observer new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { currentPos entry.target.dataset.pos; } }); }, { rootMargin: -10% 0px -80% 0px }); // 取视口上方10%附近的元素 document.querySelectorAll(article section).forEach(section observer.observe(section));恢复时const target document.querySelector(article section[data-pos${savedPos}]); if (target) { target.scrollIntoView({ block: start }); }这个方法对于段落较长的文章页尤其好用因为段落即使做了增删只要保持顺序>