锚点链接失效主因是目标元素缺失id、id不匹配或被CSS/JS干扰；现代浏览器已弃用name属性，必须用全小写无特殊字符的id，且href严格对应；SPA中需绕过路由拦截，首屏hash需手动处理。
锚点链接失效，八成不是写法错，而是目标元素没 id、id 写错、或被 CSS/JS 干扰了定位行为。
锚点必须用 id，不能只靠 name
现代浏览器（Chrome 61+、Firefox 68+、Safari 15.4+）已完全忽略 name 属性做锚点。哪怕你写了 <a name="top"></a>，href="#top" 也不会滚动过去。
- 目标元素必须带
id属性，且值全小写、无空格、不包含中文或特殊符号（如id="api-reference"✅，id="API 参考"❌） -
href值必须严格匹配：href="#api-reference"，开头的#不能漏，也不能多写/或空格 - 用开发者工具执行
document.getElementById("api-reference")，确认返回的是唯一、非null的 DOM 元素；如果有多个同名id，浏览器只取第一个
scroll-margin-top 解决 fixed 导航栏遮挡问题
点击锚点后，标题被顶部 position: fixed 的导航栏盖住，是原生行为 —— 浏览器滚动时以文档顶部为基准，不考虑视觉偏移。
- 首选方案：给所有锚点目标加 CSS：
h2[id] { scroll-margin-top: 60px; }（60px 对应导航栏高度） - 该属性在主流新浏览器中直接生效，无需 JS，且不影响 SSR 渲染逻辑
- 旧版 Safari（window.addEventListener('hashchange', () => { window.scrollBy(0, -60); })，但需加防抖，避免重复触发
- 别用
margin-top或padding-top单独撑开，会导致页面布局异常，尤其在响应式下
单页应用（SPA）里 href="#xxx" 不滚动？绕过路由拦截
Vue Router、React Router v6+ 等默认把所有 #xxx 当作路由路径处理，a 标签点击后不触发原生锚点滚动，甚至报 404。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- Vue 中：加
target="_self"强制走原生跳转，或改用<router-link to="#xxx" custom v-slot="{ navigate }"><span>跳转</span></router-link> - React 中（v6+）：必须使用
createHashRouter，并确保<link to="#faq">没被自定义useNavigate覆盖 - 通用兜底：删掉
href，用onclick触发document.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth' })，但要注意 SSR 首屏需手动补一次
监听 hashchange 时要手动处理首次加载
hashchange 事件不会在页面初始加载带 hash 的 URL（如 example.com/#faq）时触发，导致首屏不滚动。
- 必须显式检查：
if (location.hash) handleHashChange(); -
handleHashChange函数里先用document.querySelector(location.hash)判空，避免scrollIntoView报错 - 不要依赖
DOMContentLoaded或load事件顺序 —— 目标元素可能由 JS 动态插入，得等它真实挂载后再滚动 - 如果用了平滑滚动，
scroll-behavior: smooth在老 Safari 会静默降级，建议统一用 JS 控制行为，便于兼容性收口
真正卡住人的从来不是怎么写 href="#xxx"，而是目标元素是否在 DOM 中、CSS 是否截断了滚动流、以及 SPA 框架有没有悄悄劫持你的哈希 —— 这些地方一漏，就只剩“点了没反应”这种玄学问题。
