锚点目标必须用id属性，现代浏览器已忽略name属性；id值需全小写、无空格和特殊字符；href哈希值须严格匹配；用scroll-margin-top解决fixed导航栏遮挡；spa中需绕过路由拦截；首屏hash需手动触发scrollintoview。

锚点目标必须用 id，不能只靠 name

现代浏览器（Chrome 61+、Firefox 68+、Safari 15.4+）已完全忽略 name 属性做锚点定位。哪怕你写了 @#@#@#@#@#@#@#@#@#@0

React（v6+）：确保使用 createHashRouter，且 <link to="#faq"> 没被自定义 useNavigate 覆盖

通用兜底：删掉 href，用 onclick 触发 document.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth' })，但 SSR 首屏需手动补一次 if (location.hash) handleHashChange()

监听 hashchange 时首屏不触发？必须手动检查初始 hash

hashchange 事件只在 hash 值**改变时**触发，页面首次加载带 hash 的 URL（如 example.com/#faq）时，该事件根本不会触发 —— 这是多数“首屏不滚动”问题的根源。

必须显式检查初始状态：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

h2[id], h3[id], section[id] {
  scroll-margin-top: 60px;
}

注意：document.querySelector(location.hash) 必须判空，否则 scrollIntoView 在目标不存在时会抛错，中断后续逻辑。

动态生成的锚点（比如 CMS 渲染的标题）更要小心：DOM 加载完成前就执行 handleHashChange 会导致查不到元素，得等 DOMContentLoaded 或框架的 mounted/useEffect 阶段再绑定。

function handleHashChange() {
  const target = document.querySelector(location.hash);
  if (target) {
    target.scrollIntoView({ behavior: 'smooth' });
  }
}
// 页面加载时立即执行
if (location.hash) handleHashChange();
// 后续变更再监听
window.addEventListener('hashchange', handleHashChange);

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