HTML目录本质是id锚点+a标签跳转，无需JavaScript；必须用唯一、合法id（小写字母开头，仅含字母数字短横线），禁用name；同页href="#id"，跨页href="path#id"；目标元素不可被display:none或visibility:hidden隐藏，且需在DOM中存在。
HTML 做目录本质就是用 id 定义锚点 + a 标签跳转，不依赖 JavaScript 也能跑通。关键不是“怎么写”，而是“id 怎么取、怎么查、怎么避免冲突”。
目录项怎么对应到页面内容？用 id，别用 name
现代 HTML（HTML5）里，a 标签的 name 属性已废弃，浏览器兼容性差，部分新版本直接忽略。必须用目标元素的 id 属性作为锚点标识。
-
id值必须全文档唯一，比如<h2 id="introduction">引言</h2>，不能重复出现id="introduction" - 不要用空格、中文、特殊符号（如
★、@），推荐只用小写字母、数字、短横线（-），例如faq-section、section-3 - 如果内容是动态生成的（比如 CMS 或 Markdown 渲染），确保生成逻辑也输出合法
id，否则点击目录没反应
a 链接 href 怎么写才跳得准？路径和锚点要拆开看
href 值分两种情况：同页跳转和跨页跳转。容易错的是混用相对路径和锚点，导致 404 或跳空。
- 同一页跳转：href 只写
#加id，例如<a href="#installation">安装步骤</a>，前提是目标<div id="installation">确实在当前页 - 跨页跳转：href 写成
"页面路径#id"，例如<a href="guide.html#troubleshooting">常见问题</a>；注意路径是相对于当前 HTML 文件的位置，不是项目根目录 - 如果路径含中文或空格，必须 URL 编码，比如
常见问题.html要写成%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98.html，否则多数浏览器会失败
点击后页面没滚动？检查这三处硬性限制
锚点链接失效，90% 不是代码写错，而是被 CSS、JS 或浏览器策略拦住了。
立即学习“前端免费学习笔记（深入）”；
- CSS 中设置了
scroll-behavior: smooth是可选的，但若写了overflow: hidden在父容器上（比如<body>或某个<div>），锚点滚动会被截断——目标元素必须在可滚动的上下文中 - JavaScript 如果调用了
event.preventDefault()在a的 click 事件上，又没手动触发滚动，链接就完全静默 - 某些浏览器（特别是 Safari 移动端）对刚加载完就立即跳转的锚点支持不稳定，可加
setTimeout(() => { ... }, 100)延迟触发，或监听DOMContentLoaded
最常被忽略的一点：锚点目标元素必须存在于 DOM 中，且不能是 display: none 或 visibility: hidden。哪怕只是临时隐藏，也要确保它有渲染尺寸（比如用 opacity: 0 代替 display: none）。否则浏览器找不到“落点”，就停在顶部。
