应使用 scroll-margin-top 替代 padding-top 解决 fixed header 遮挡锚点问题，值等于 header 实际高度；动态内容需确保 DOM 渲染完成再跳转；id 命名须合法、唯一且可见。
锚点跳转后内容被 fixed header 遮住怎么办
这是最常遇到的“跳转了但看不见目标”的问题。浏览器默认把 id 元素顶部对齐视口顶部，而 position: fixed 的导航栏会盖住它——不是代码错了，是滚动逻辑没补偿视觉偏移。
- 别用
margin-top: -60px+padding-top: 60px挤开目标元素：这会破坏文档流，导致布局错位、可访问性问题，且在响应式场景下容易失效 - 正确做法是给目标元素加
scroll-margin-top：例如h2[id] { scroll-margin-top: 64px; }，值应严格等于 fixed header 的实际高度（含 border/padding） - 该 CSS 属性只对带
id的元素生效，且要求目标处于可滚动上下文内；若目标在 Shadow DOM 或 iframe 中，需单独设置 - 兼容性注意：Chrome 69+、Firefox 68+、Safari 15.4+ 支持；旧版 Safari 可降级使用
scroll-padding-top设置在html或body上
为什么 padding-top 不能替代 scroll-margin-top
padding-top 是布局属性，它拉开了目标元素自身内容与上边界的距离，但不改变浏览器锚点定位的参考点——滚动仍以元素**边界框顶部**为基准，结果还是被遮挡，且额外 padding 会让页面高度突增、影响其他样式计算。
-
scroll-margin-top是滚动专属偏移，仅影响锚点定位行为，不影响布局、盒模型或无障碍阅读顺序 - 例如：
div#faq { padding-top: 80px; }会让 #faq 内容下移，但跳转时依然停在原位置（即 padding 上方），视觉上仍是遮挡状态 - 而
div#faq { scroll-margin-top: 80px; }告诉浏览器：“滚动时，请把 #faq 的顶部对齐到视口顶部往下 80px 的位置”，内容自然可见
动态渲染内容中 id 锚点失效的处理时机
Vue/React 页面或 AJAX 加载后插入的 DOM，常出现点击链接无反应——不是 href 写错，而是目标 id 在点击瞬间尚未挂载到 DOM 中，原生锚点机制找不到匹配项。
- 监听框架生命周期：Vue 用
mounted，React 用useEffect(() => {}, [])，确保目标元素已渲染再启用跳转逻辑 - 手动触发滚动比依赖原生锚点更可控：
document.getElementById("section-2").scrollIntoView({ behavior: "smooth", block: "start" }) - 注意
block: "start"能避免被 sticky/fixed 元素遮挡；block: "center"可能切掉导航栏，慎用 - 若需支持 hashchange 监听（如 URL 变化后高亮菜单），必须确保 hash 更新发生在 DOM 就绪之后，否则首次加载时可能错过事件
id 命名不规范导致跳转静默失败
锚点跳转失败通常不报错，只是“没反应”，根本原因多是 id 值本身不合法或不匹配。
立即学习“前端免费学习笔记（深入）”；
-
id不能以数字开头：如id="1-section"在 Safari 15.4 之前解析异常，应改为id="section-1" - 大小写敏感：
href="#Contact"不匹配id="contact"；空格、中文、特殊符号（如id="联系我们"）会导致中断 -
id必须唯一：重复时浏览器只认第一个，后续跳转全部失效；可用 DevTools 的 Elements 面板搜索[id="xxx"]快速排查 - 目标元素不能是
display: none或visibility: hidden：不可见元素无法滚动定位，即使 DOM 存在
