锚点链接需id与href严格配对且目标元素真实存在；id须唯一、不以数字开头、不含空格中文；href必须为“#”加完全一致的id字符串；固定头部遮挡用scroll-margin-top解决；平滑滚动用html{scroll-behavior:smooth}。
锚点链接不是“加个链接”就完事，而是 id 和 href 必须严格配对，且目标元素必须真实存在于 DOM 中——漏掉任一环节，点击就失效。
目标元素必须带合法 id 属性
浏览器只认 id，不认 class、data-id 或 name（name 在现代 HTML 中已废弃）。这个 id 要满足三个硬性条件：
- 值必须唯一，同一页面出现两次，点击只会跳到第一个
- 不能以数字开头（如
id="1-section"在旧版 Safari 可能不触发滚动） - 避免空格和中文，推荐小写+连字符（如
id="faq-troubleshooting"）
加的位置也很关键：放在你希望浏览器“停住”的那个元素上，通常是 <h2>、<section> 或包裹内容的 <div>，而不是在它前面额外插一个空 <a name="xxx"></a> —— 那种写法过时了，也不可靠。
a 标签的 href 必须写成 #xxx 形式
链接本身没特殊要求，但 href 值必须是 # 加上目标 id 的**完全一致字符串**，大小写敏感，也不能多空格或斜杠：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
href="#getting-started"→ 对应<h2 id="getting-started"></h2> - ❌ 错误：
href="#Getting-Started"（大小写错）、href="getting-started"（漏#）、href="#section-1"（但目标是id="section1"）
如果目标在另一个 HTML 文件里，写法是 href="about.html#contact"，注意中间没有斜杠，且目标页必须也存在该 id。
固定头部遮挡内容？用 scroll-margin-top 补偏移
点击锚点后，目标元素顶部常被 position: fixed 的导航栏盖住。这不是 JS 问题，是 CSS 布局导致的默认行为。解决方式极简：
- 给目标元素加一行 CSS：
scroll-margin-top: 80px;（数值等于头部高度） - 或者统一加在所有锚点目标上：
[id] { scroll-margin-top: 80px; } - 别用 JS 算高度再滚动——既冗余又容易因加载时机出错
这个属性兼容性很好（Chrome 69+、Firefox 68+、Safari 15.4+），2026 年已可放心用。
想平滑滚动？优先用 scroll-behavior: smooth
原生跳转是瞬移，体验生硬。最轻量的解法就是一行 CSS：
html {
scroll-behavior: smooth;
}
注意三点：
- 必须作用在
<html>根元素上，写在<body>或某个容器里无效 - 它会影响所有基于
#的跳转（包括地址栏手动输哈希），不是只针对你的菜单 - 如果页面有 JS 动态插入内容，首次点击可能仍卡顿——因为 DOM 还没就绪，此时得配合
requestAnimationFrame或监听DOMContentLoaded
真正难处理的不是怎么加锚点，而是当目标元素由 JS 渲染（比如 React/Vue 组件异步加载）、或页面结构动态变化时，id 存在但还没挂到 DOM 上——这时候原生跳转会静默失败，必须用 scrollIntoView() 主动触发，且要等元素可访问后再调。
