锚点链接需严格匹配id属性，目标元素必须有唯一合法id（小写字母+连字符、非数字开头），href值须带#且大小写完全一致；固定导航遮挡用scroll-margin-top解决；动态内容需确保dom渲染完成后再触发跳转。
锚点链接不是“加个链接就行”，它依赖 id 匹配和浏览器原生滚动行为，写错一个字符或漏掉一个 id 就会跳转失败。
怎么给目标位置加锚点（必须用 id，别用 name）
现代 HTML 标准只认 id 属性作为锚点标识符，name 已废弃（IE8 及更早版本除外）。目标元素必须有唯一、合法的 id 值。
-
id值不能以数字开头（如id="1section"无效），推荐用小写字母+连字符（如id="faq-install"） - 避免空格、中文、特殊符号（
!、@、?等），否则href="#faq?step=2"这类写法会解析失败 - 不要重复使用同一
id—— 浏览器只会滚动到第一个匹配元素，后续同名id被忽略 - 常见错误：给
<div> 加了 <code>id，但该div高度为 0 或被display: none隐藏，导致视觉上“跳过去了却看不见”怎么写跳转链接（
href必须带#，且严格对应id）链接的
href值是字符串匹配，大小写敏感、不可含空格，且必须与目标元素的id完全一致（不含#）。- 正确写法：
@#@#@#@#@#@#@#@#@#@0→ 对应<section id="contact"></section> - 错误写法：
<a href="contact"></a>（缺#）、<a href="#Contact"></a>（大小写不一致）、<a href="#contact%20"></a>（末尾多空格） - 如果页面路径本身含哈希（如
page.html#intro），再点锚点链接会叠加哈希，变成page.html#intro#features—— 大多数浏览器仍能识别最后一个#后的部分，但逻辑混乱，建议避免
固定导航栏遮挡标题？用
scroll-margin-top补偏移点击锚点后内容被
position: fixed的顶部导航盖住，是高频问题。CSSscroll-margin-top是最轻量、无需 JS 的解法。- 直接在目标元素上设置：
<h2 id="install" style="scroll-margin-top: 80px;">安装步骤</h2> - 值推荐设为导航栏高度（如
64px或clamp(64px, 8vh, 100px)），确保不同屏幕下都避开遮挡 - 注意兼容性：Chrome 89+、Firefox 97+、Safari 15.4+ 支持；旧版 Safari 需回退到 JS 方案（监听
hashchange+scrollIntoView({ block: 'start', behavior: 'smooth' })） - 别用
padding-top+margin-top: -Xpx模拟 —— 会破坏文档流，可能影响其他样式或 JS 计算
动态生成内容里锚点失效？等 DOM 渲染完再触发
用 JavaScript 或框架（Vue/React）渲染内容后，
id元素可能还没挂载到 DOM，此时点击链接会跳空。- 纯 JS 场景：监听
DOMContentLoaded或使用MutationObserver检测目标id是否出现，再允许跳转 - Vue 场景：在
mounted或nextTick后调用document.getElementById('xxx')?.scrollIntoView() - React 场景：用
useEffect+useRef，确保 ref 绑定完成后再响应 hash 变化 - 简单粗暴但有效：页面加载后延时 100ms 再检查
window.location.hash并手动滚动（仅适用于首屏锚点）
锚点看似简单，真正卡住人的永远是细节：id 拼写、空格、渲染时机、fixed 元素遮挡——这些地方一错，整个跳转链就断了。
- 正确写法：
