核心是“按路由存、按时机取、防抖+延时恢复”：以scroll-${routePath}为键名存储，deactivated/清理函数中保存；activated/useEffect中等待DOM就绪（nextTick或load事件）后恢复，并仅对back_forward导航生效。
用 sessionStorage 管理单页应用（SPA）回退时的滚动条位置，核心是“按路由存、按时机取、防抖+延时恢复”。它不依赖刷新，天然适配 Vue/React 路由跳转场景，比 localStorage 更轻量、更安全。
按路由路径键名存储滚动位置
每个页面路由应有唯一标识，避免不同页面互相覆盖。推荐格式：scroll-${routePath}（如 scroll-/list 或 scroll-/article/123）。不要用固定键名如 scrollPos，否则从详情页返回列表页时可能误读详情页的位置。
- Vue 中可在
deactivated钩子中保存：sessionStorage.setItem(`scroll-${this.$route.path}`, String(window.scrollY)) - React 中可在
useEffect清理函数里写：sessionStorage.setItem(`scroll-${location.pathname}`, String(window.scrollY)) - 若使用 Hash 路由（如
#/user），建议用location.hash替代pathname，保持一致性
在页面激活/挂载时精准恢复
不能一加载就 scrollTo —— 此时 DOM 可能未就绪（骨架屏未消失、图片未加载、异步组件未渲染），导致滚动偏移错乱。需等待真实内容可用后再执行。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Vue 中在
activated钩子内恢复，并加nextTick或setTimeout(..., 0)确保 DOM 更新完成 - React 中在
useEffect的首次渲染后执行，可结合requestIdleCallback或监听load事件（针对关键图片） - 若页面含懒加载图片，建议监听
IntersectionObserver目标区域是否真正进入视口；未进入则延迟 300ms 再试，最多重试 2 次
区分返回行为，避免误恢复
用户直接输入 URL 打开页面，或从首页点击进入，都不该恢复滚动位置 —— 否则会莫名其妙滚到中间。只对“浏览器返回”或“路由后退”生效。
立即学习“前端免费学习笔记（深入）”；
- 利用
performance.navigation.type === 1（刷新）或performance.getEntriesByType('navigation')[0]?.type === 'back_forward'判断是否为返回行为 - 更轻量的做法：在路由离开前记录时间戳，在进入时检查距上次离开是否 document.visibilityState === 'visible'）
- 若判断非返回场景，直接忽略 sessionStorage 中的值，不调用
scrollTo
兼容性与异常兜底
部分 iOS 隐私模式、老旧安卓 WebView 或禁用 storage 的环境会抛出 SecurityError 或 QuotaExceededError。必须包裹 try/catch，失败即跳过，不中断主流程。
- 写入时：
try { sessionStorage.setItem(key, value); } catch (e) { /* 忽略 */ } - 读取时：
let pos; try { pos = sessionStorage.getItem(key); } catch (e) { pos = null; } - 若获取到值，务必用
parseInt(pos, 10)转换并校验是否为有效数字，防止 NaN 导致scrollTo(0, NaN)
