原生锚点跳转失效主因是id匹配失败、DOM未就绪或fixed头部遮挡；需确保href与id严格一致、id合法唯一、目标存在且已渲染，并用scroll-margin-top或scrollIntoView解决遮挡与时机问题。
原生锚点跳转失效，90% 不是代码写错，而是 id 匹配失败、DOM 未就绪或 fixed 头部遮挡——直接加 html { scroll-behavior: smooth; } 并不能解决这些问题。
href="#id" 和 id="id" 必须严格一致
浏览器只认 id 属性，不认 class、name 或其他属性。大小写、空格、中文、开头数字都会导致静默失败。
-
href="#contact"对应的必须是<div id="contact">，写成 <code>id="Contact"或id=" contact "都无效 - ID 不能以数字开头：
id="1-section"在部分 Safari 中解析异常，改用id="section-1" - 中文需转义：标题“安装指南”建议生成
id="install-guide"，而非id="安装指南" - 页面中所有
id必须全局唯一；重复时，锚点总跳到第一个匹配元素 - 不要依赖原生 href 行为，改用 JS 主动滚动：
el.scrollIntoView({ behavior: 'smooth', block: 'start' }) - 确保执行时机：在
mounted（Vue）、useEffect(() => {}, [])（React）或DOMContentLoaded后绑定事件 - 加存在性判断：
if (targetEl && targetEl.offsetParent !== null)，避免对隐藏/未挂载元素调用 - 若目标由异步模块加载，需监听模块加载完成事件，再触发滚动
- 正确做法是给目标元素加
scroll-margin-top：h2[id] { scroll-margin-top: 64px; }（值 = 导航栏实际高度） - 该属性仅影响滚动定位参考点，不影响盒模型、无障碍阅读顺序或响应式行为
- 兼容性足够：Chrome 69+、Firefox 68+、Safari 15.4+ 均支持；旧版 Safari 可降级为
scroll-padding-top设在html上 - 若用 JS 滚动，
block: 'start'已能规避遮挡；block: 'center'可能切掉顶部导航，慎用 - Vue：加
target="_self"强制走原生跳转，或用<router-link to="#xxx" custom v-slot="{ navigate }"><a></a></router-link> - React：用
<a href="#faq" onclick="{(e)"> { e.preventDefault(); document.getElementById('faq')?.scrollIntoView(...) }}></a> - 通用方案：监听
hashchange，并在首次加载时手动执行一次处理逻辑（location.hash不为空时） - 注意：IE8/9 中
hashchange必须绑定到window，且不冒泡
目标元素未渲染完成就点击，原生锚点会静默失败
Vue/React 动态组件、AJAX 插入内容、懒加载区块，都可能导致点击时 document.getElementById() 返回 null —— 浏览器找不到目标，也不报错。
固定导航栏遮住锚点标题，别用 padding-top 补偿
原生跳转把目标元素顶部对齐视口顶部，position: fixed 导航栏盖住标题是必然结果。用 padding-top 挤开内容会破坏布局流，且不解决根本问题。
立即学习“前端免费学习笔记（深入）”；
单页应用（SPA）中锚点被路由系统拦截
Vue Router、React Router 默认把 #xxx 当作路由路径处理，导致点击无滚动，甚至触发 404。
最容易被忽略的是 scroll-margin-top 的单位和取值精度——它必须严格等于 fixed 元素的实际高度（含 border、padding），差 1px 就可能造成半行遮挡；而动态内容加载后 offsetTop 变化，又会让 JS 滚动偏移失效。这两个点，往往要一起调。
