HTML书签本质是浏览器对id锚点的原生支持，需目标元素有唯一id且链接用#id；固定头部遮挡时用scroll-margin-top；高级控制用scrollIntoView()。
HTML 书签的本质是 id 属性和 # 链接
书签不是独立功能，而是浏览器对页面内锚点的原生支持。核心就两点：目标位置得有唯一 id，跳转链接得用 #id名。别想复杂，它不依赖 JS，也不需要额外库。
常见错误是把 name 属性当书签用（老式写法），现代 HTML5 只认 id；还有人给多个元素设相同 id，结果点击只跳到第一个——id 必须全局唯一。
- 目标元素必须带
id，比如：<h2 id="section2">第二部分</h2> - 跳转链接写成：
<a href="#section2">去第二部分</a> - 链接可放在同页任意位置，包括导航栏、页脚，甚至其他页面（如
href="page.html#section2"）
滚动到目标时被固定头部遮挡？用 scroll-margin-top
如果页面有 position: fixed 的顶部导航栏，点击书签后，目标内容常被盖住——因为浏览器默认把目标元素顶边对齐视口顶部。
解决方法是给目标元素加 CSS：scroll-margin-top，告诉浏览器“留出多少空间”。这个值通常等于导航栏高度。
立即学习“前端免费学习笔记（深入）”；
- 示例：
<h2 id="faq" style="scroll-margin-top: 60px;">常见问题</h2> - 更推荐写在 CSS 里统一控制：
h2[id] { scroll-margin-top: 60px; } - 注意：
scroll-margin-top在 Safari 15.4+ 和 Chrome 92+ 才稳定支持；旧版可用 JS 模拟，但没必要为兼容性牺牲简洁性
用 Element.scrollIntoView() 做更可控的跳转
纯 # 链接跳转是硬跳，无动画、无法监听、不能微调对齐方式。真要控制滚动行为（比如平滑滚动、居中显示），得用 JS 的 scrollIntoView()。
它比 href="#" 灵活得多，但代价是必须手动绑定点击事件，且需确保目标元素已渲染。
- 基础用法：
document.getElementById("section3").scrollIntoView({ behavior: "smooth", block: "start" }); -
block可选"start"（顶对齐）、"center"（居中）、"end"（底对齐） - 别在 DOM 加载前调用，否则
getElementById返回null，会报Cannot read property 'scrollIntoView' of null
书签链接失效的三个典型原因
链接点了没反应，大概率不是语法错，而是环境或结构问题。
-
id拼写不一致：链接写#secton2（少一个i），目标却是id="section2" - 目标元素被
display: none或visibility: hidden隐藏：浏览器找不到可滚动的可见元素，跳转静默失败 - SPA（如 React/Vue）路由拦截了
#：框架把#当作路由前缀处理，导致原生锚点失效；此时得用框架提供的滚动 API，而非直接写href="#xxx"
复杂点在于，书签看着简单，但一旦混入 CSS 布局、JS 框架或动态渲染，失效原因就藏得深。检查顺序建议：先看 id 是否存在且拼对，再确认元素是否渲染且可见，最后排查路由或 JS 干预。
