原生锚点跳转需满足四个条件：目标元素有合法id、id值与href完全一致、dom加载完成时id已存在、无css/js干预滚动；常见失效原因包括id缺失、命名不规范、fixed头遮挡、动态渲染未就绪等。
直接用 id 属性 + # 链接就能实现原生锚点跳转，无需 JS，但必须满足四个硬性条件：目标元素有合法 id、id 值与 href 完全一致、id 在 DOM 加载完成时已存在、页面未被 CSS 或 JS 干预滚动行为。
目标元素没加 id 属性，点击链接毫无反应
这是最常被忽略的“静默失败”场景：链接写的是 href="#faq"，但目标 <h2>常见问题</h2> 根本没带 id="faq"。浏览器不会报错，也不会滚动——它只是找不到匹配项。
- 必须把
id写在目标元素上，不是父容器、不是 class、不是 data-*，只能是id -
id值不能以数字开头（如id="1-intro"在 Safari 15.4 之前可能失效），推荐id="intro-1" - 大小写敏感：
href="#Contact"不会匹配id="contact"；空格和中文也不允许 - 同一页面中
id必须唯一，重复会导致跳转到第一个匹配元素，后续失效
跳转后内容被顶部导航栏遮住
固定定位的 header（position: fixed）会让浏览器把目标元素顶部对齐视口顶部，结果文字被盖住。过去靠 JS 补偿，现在用 scroll-margin-top 更可靠。
- 给目标元素加 CSS：
h2[id] { scroll-margin-top: 64px; }（数值匹配 header 高度） - 这个属性作用于带
id的元素本身，或其可滚动的父容器；不要写在html或body上 - 别用
margin-top: -64px+padding-top: 64px模拟——那是布局 hack，容易引发其他样式冲突 - IE 不支持该属性，若需兼容，才回退到
scrollIntoView()或window.scrollTo()
动态渲染内容导致锚点失效
Vue/React 渲染、AJAX 插入、或 document.write 后挂载的 DOM，往往在链接点击时目标元素还没生成，原生锚点机制无法感知。
- 监听
DOMContentLoaded或框架的挂载钩子（如 Vue 的mounted），确保目标id已写入 DOM - 手动触发滚动：
document.getElementById('faq').scrollIntoView({ behavior: 'smooth', block: 'start' }) - 若需拦截所有锚点链接，可用
document.querySelectorAll('a[href^="#"]')绑定 click 事件并e.preventDefault() - 注意：
scrollIntoView的block: 'start'能避免被 sticky header 遮挡，'center'可能切掉顶部导航栏
想让跳转变平滑但又不想影响旧浏览器
scroll-behavior: smooth 是最简方案，但它只作用于整个文档滚动，且不被 IE 支持。
- 只需在
元素上加一行 CSS：scroll-behavior: smooth; - 它会让所有原生锚点、
scrollIntoView()、甚至window.scrollTo()都自动平滑 - 如果项目必须支持 IE，就别依赖它；改用 JS 控制
scrollIntoView({ behavior: 'smooth' })，并 fallback 到behavior: 'auto' - 注意：某些移动端 WebView（如老版 UC）对
scroll-behavior支持不稳定，建议实测
真正卡住人的从来不是“怎么写”，而是“为什么写了没用”——90% 的问题出在 id 是否真实存在于当前 DOM、是否拼写一致、是否被 CSS 滚动上下文意外截断。先检查这些，再动代码。
