原生锚点跳转只需指向目标元素的id属性，但失效主因是id拼写错误、重复、目标未渲染或被css隐藏；需确保id唯一且匹配、元素可见，并用scroll-margin-top避让fixed导航栏。
点击跳转到页面内某个位置，直接用 #id 就行
只要目标元素有 id 属性，<a href="#xxx"></a> 就能跳过去。浏览器原生支持，不用 JS，也不用额外配置。关键不是“怎么写”，而是“为什么有时候点不动”——多半是 id 拼错、重复、或目标元素不可见。
常见错误现象：
• 点击后页面没滚动（但 URL 地址栏变了）
• 跳到顶部或偏移位置不对
• 同一页面多个 <a href="#same"></a>，只第一个生效
-
id值必须唯一，且不能以数字开头（如id="1section"合法但部分旧浏览器不识别，建议用id="section1"） - 目标元素得在 DOM 里真实存在，且不是
display: none或visibility: hidden（后者仍可锚点定位，前者不行） - 如果目标元素在
position: fixed容器里，可能因父容器裁剪导致视觉上“没跳到”，实际已滚动到位
href 写 #top 还是 #header？区别在哪
没本质区别，都是靠 id 匹配。但 #top 是惯用写法，通常对应 <div id="top"> 或直接放在 <code> 开头；而 #header 更语义化，适合导航栏定位。
使用场景：
• 返回顶部按钮：用 #top 简洁明确
• 目录跳转：每个章节用不同 id，如 #introduction、#usage
• 表单错误提示：提交失败后跳到首个 input 的 id，提升可访问性
- 不要用 class 名代替 id（
href=".section"无效） - URL 中的
#后只能是合法 ID 值，不能带空格、中文（除非 URL 编码，但没必要） - 若目标
id含特殊字符（如id="user-data"），href保持原样写#user-data，浏览器自动处理
滚动太生硬？加 scroll-behavior: smooth
默认跳转是瞬移，体验差。CSS 一行就能变平滑滚动：
html {
scroll-behavior: smooth;
}
注意：
• 必须写在 html 元素上，写在 body 或其他容器无效
• 不兼容 IE 和旧版 Safari（iOS • 如果页面已有 JS 控制滚动（比如监听 hashchange），它会和 CSS 行为共存，优先级由浏览器决定
- 想局部平滑（仅某些链接）？只能用 JS 的
element.scrollIntoView({ behavior: 'smooth' }) - 移动端 Safari 有时对
scroll-behavior响应延迟，尤其页面内容动态加载后 - 如果用了
overflow-anchor: none，可能干扰锚点定位，慎用
为什么锚点跳转后，标题被固定导航栏盖住？
这是最常被忽略的兼容问题：当页面顶部有 position: fixed 导航栏时，锚点定位的目标元素顶部会被遮挡。
解决方案不是改 JS，而是用纯 CSS 修复：
- 给目标元素加
padding-top+margin-top: -Xpx（X 为导航栏高度），再设box-sizing: border-box - 更推荐：用
::before伪元素撑开空间，不破坏原有布局：h2[id]::before { content: ''; display: block; height: 60px; /* 导航栏高度 */ margin-top: -60px; visibility: hidden; } - 或者用
scroll-margin-top（现代方案）：h2[id] { scroll-margin-top: 60px; }，Chrome 89+、Firefox 87+ 支持，Safari 15.4+ 支持，无需 hack
这个偏移量必须和固定导航栏的实际高度严格一致，差 1px 都可能露出缝隙或过度留白。
