用 document.querySelectorAll('h2, h3') 遍历标题，为空 id 时按规则生成唯一合法 id，构建带 #href 的 a 标签插入 ，配合 scrollIntoView 和 scroll-margin-top 实现平滑锚点跳转与头部避让。
怎么用 JavaScript 自动生成 h2/h3 锚点目录
直接生成，不依赖第三方库，核心就靠 document.querySelectorAll 和 Element.id 的配合。前提是你的 h2、h3 标签得有可用的 id —— 没有的话，脚本会自动补，但补得是否唯一、是否合法，得你盯住。
常见错误现象：href 指向 #undefined，点不动；或多个标题生成相同 id（比如都叫 section），导致点击只滚动到第一个。
- 先遍历
h2, h3：用document.querySelectorAll('h2, h3')，别漏掉h3，否则子节不进目录 - 每个标题检查
el.id，为空就基于文本生成：用textContent.trim().replace(/[^a-z0-9\u4e00-\u9fa5]+/gi, '-').replace(/^-+|-+$/g, '')处理中文和符号，避免id以数字或横线开头（HTML 不认） - 生成
a标签时，href必须是#xxx形式，且xxx要和目标标题的id完全一致（区分大小写） - 插入位置建议用一个空的
<nav id="toc"></nav>，然后toc.innerHTML = htmlString，别用appendChild循环加，慢还容易错
为什么 h2-h3 结构崩了目录就乱
不是脚本问题，是语义层级断了。浏览器原生不校验标题嵌套，但目录生成逻辑默认「h3 属于前一个 h2」——如果中间插了个 h1 或漏了 h2 直接跳 h3，生成的 DOM 层级就会平铺，看不出父子关系。
使用场景：长文档、技术文档页、博客正文。一旦混入 h4 又没处理，它会被忽略；但若你主动想支持 h4，就得改选择器和缩进逻辑，不是加个 , h4 就完事。
立即学习“前端免费学习笔记（深入）”；
-
h2当一级条目，h3自动缩进作为子项 —— 这是硬编码在生成逻辑里的，不是 CSS 控制的 - 如果实际 HTML 是
h2 → h4 → h3，那h4被跳过，h3会挂在上一个h2下，视觉上错位 - 兼容性无压力，
querySelectorAll和id在 IE9+ 都稳，但 IE 不支持scrollIntoView({ behavior: 'smooth' })，要降级用scrollTop
点击目录没滚动？检查这三处
90% 的“点不动”不是 JS 错，是锚点链路断在中间。最典型的是：标题有 id，但页面里存在同名 name 属性元素（比如旧式表单），或者用了 position: fixed/sticky 的头部遮挡了滚动定位点。
错误信息不会报，浏览器静默失败。打开 DevTools → Elements 面板，点目录链接，看地址栏 hash 是否变化；再手动改 URL hash，看是否滚动 —— 这步能快速分清是 JS 问题还是锚点本身无效。
- 确保目标
h2/h3元素在视口内可滚动区域中，不在overflow: hidden容器里 - 检查有没有其他元素占了相同
id，DOM ID 必须全局唯一，重复会导致getElementById或锚点跳转行为不可预测 - 滚动行为建议加
event.preventDefault()+el.scrollIntoView({ block: 'start', behavior: 'smooth' })，别直接靠浏览器默认跳转，可控性差
CSS 怎么让目录不遮挡标题
滚动后标题被 sticky 导航栏盖住，不是 JS 能解决的，得靠 CSS 偏移。关键不是给目录加 margin，而是给每个锚点目标（即 h2/h3）加滚动补偿。
性能影响几乎为零，但写法容易错：用 padding-top + margin-top: negative 组合，比 scroll-margin-top 兼容性更好（后者 Chrome 89+ 才稳定）。
- 给所有
h2, h3加scroll-margin-top: 60px（值等于导航栏高度），现代浏览器直接生效 - 兼容老浏览器：加
padding-top: 60px，再用margin-top: -60px抵消视觉位移，确保布局不受影响 - 别给
<nav id="toc"></nav>设position: fixed后忘了加top: 0和z-index，不然可能被内容层挡住
真正麻烦的是动态内容加载后标题增删 —— 自动生成目录的函数得重新跑一遍，而且得等新 DOM 插入完成后再执行，这点很容易被忽略。
