刷新后滚动位置丢失是浏览器默认行为，非bug；最稳还原方案是用sessionstorage存取scrollpos_${location.pathname}，dom更新后requestanimationframe scrollto，并及时清除。

刷新后滚动位置丢失，不是浏览器 bug，是默认行为

HTML 页面刷新（location.reload() 或地址栏回车）后，window.scrollY 一定会重置为 0，这是所有现代浏览器的统一规范。它不会记住你上次滚到哪，也不会保留 location.hash（除非你手动处理）。指望“刷新自动恢复”属于对浏览器机制的误判。

sessionStorage 存 window.scrollY 是最稳的还原方案

比起依赖 location.hash 或监听 hashchange，直接存取滚动像素值更精确、不依赖 DOM 元素存在性、也不怕懒加载导致的高度抖动。

• 保存时机：在触发刷新/局部更新前，比如按钮 onclick 开头或 fetch() 调用前
• 键名必须带上下文：用 scrollPos_${location.pathname}，避免多标签页互相覆盖
• 还原时机：DOM 更新完成后再执行，推荐 requestAnimationFrame(() => window.scrollTo(0, pos))，比 setTimeout(..., 0) 更可靠
• 别忘了清除：如果只希望“本次刷新”生效，还原后立刻 sessionStorage.removeItem(key)

location.hash 在刷新中不可靠的三个硬伤

很多人想靠改 hash + reload 来“跳转并刷新”，但这条路踩坑极多：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• location.reload() 默认丢弃 hash，这是标准行为，不是 bug
• 目标元素可能被 JS 重建，id="section2" 在新 DOM 中未必还存在或位置未定
• 用户手动拖动过滚动条，停在两个锚点之间——hash 根本无法表达这种中间态

若非得用 hash，替代方案是：location.href = location.origin + location.pathname + location.search + location.hash，然后由前端自己解析跳转，而不是靠 reload()。

SPA 中锚点失效？先确认路由是否劫持了 #

Vue Router / React Router v6+ 默认把所有 #xxx 当作路由路径处理，<a href="#faq"></a> 点击后根本不会触发原生滚动。常见表现是控制台报 404 或静默无反应。

• Vue：加 target="_self" 强制走浏览器原生逻辑，或用 <router-link to="#faq" custom></router-link> 包裹
• React（v6+）：必须使用 createHashRouter，且确保 <link to="#faq"> 没被 useNavigate 拦截
• 兜底写法：document.querySelector(location.hash)?.scrollIntoView({ behavior: "smooth" })，但需在组件挂载后执行，且 SSR 首屏要单独处理

真正容易被忽略的是：首次加载带 hash 的页面（如 example.com/#contact），hashchange 事件根本不会触发——必须手动检查 location.hash 并执行一次滚动。

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