html无自动生成目录功能，需用js解析h2–h4标题、清洗文本生成唯一id、用scrollintoview平滑滚动，并通过documentfragment高效构建dom避免卡顿。
HTML 本身不提供“自动生成目录+点击跳转”的内置功能，所有可用方案都依赖 JavaScript 解析标题结构、生成 DOM 节点，并配合原生锚点机制（id + #id）实现定位。关键不在“怎么写得漂亮”，而在“怎么让标题有 id、怎么保证滚动不卡顿、怎么处理重复标题或空文本”。
怎么给标题自动加 id（避免手动写）
浏览器不会自动给 <h2>章节一</h2> 加 id，必须用 JS 补上。否则后续所有跳转都会失败。
- 直接取
textContent做id会出问题：含空格、中文、标点 → 浏览器不认。必须清洗，例如text.replace(/[^a-z0-9\u4e00-\u9fa5]/gi, '-').replace(/-+/g, '-') - 重复标题（如多个“安装步骤”）会导致
id冲突 → 后面的覆盖前面的。建议加计数后缀：id="install-steps-1"、id="install-steps-2" - 空标题（
<h3></h3>）或纯空白符标题要跳过，否则生成无效id=""，触发控制台警告且破坏逻辑 - 推荐只处理
h2–h4：太浅（h5+）层级太深难导航；太深（h1）通常只一个，做主标题更合适
scrollIntoView 比 location.href = "#xxx" 更可控
直接改 location.href 会强制整页跳，有闪烁、无法取消、不支持平滑滚动（除非整个页面设 scroll-behavior: smooth，但兼容性差且影响全局）。
-
element.scrollIntoView({ behavior: 'smooth', block: 'start' })是现代标准，支持取消、可监听、不刷新 URL - 必须确保目标元素存在且有
id，否则报错Cannot read property 'scrollIntoView' of null - 若目标在折叠区域（如
display: none的 tab 面板里），需先展开再调用，否则滚动无效 - 移动端 Safari 对
scrollIntoView的behavior: 'smooth'支持不稳定，可降级为behavior: 'auto'或用window.scrollTo手动计算位置
目录 DOM 怎么生成才不卡页面（性能关键）
遍历几十个标题并插入 DOM 节点，如果每步都触发重排（reflow），页面会明显卡顿，尤其低端设备。
- 别用
innerHTML += ...累加拼接：每次赋值都触发一次解析和重排 - 用
document.createDocumentFragment()先离屏构建完整目录树，最后一次性appendChild - 目录项的缩进靠 CSS 实现（如
margin-left: calc(var(--level) * 1.5em)），别用 JS 动态设style.marginLeft - 绑定点击事件时，用事件委托（监听父容器）而非每个
<a></a>单独绑，减少内存占用
为什么点击后没反应？常见静默失败点
这类问题往往没报错，但行为完全失效，排查要盯住三处：
-
document.querySelector('#xxx')返回null→ 检查标题是否真被加了id，用开发者工具 Elements 面板确认，不是看源码 - 目标元素被
position: fixed/absolute或transform包裹 →scrollIntoView可能定位偏移，需手动调整offsetTop - CSS 中写了
scroll-margin-top（比如固定 header 高度）但没设 → 滚动后标题被遮挡，实际已定位成功，只是看不见 - 页面用了 Vue/React 等框架，JS 运行时机不对（如在
mounted里执行但 DOM 尚未就绪）→ 必须等真实 DOM 渲染完，Vue 用this.$nextTick，React 用useEffect第二参数为空数组
最麻烦的不是写不出代码，而是标题结构不规范、CSS 干预滚动行为、框架生命周期没对齐——这三类问题不会报错，但会让目录“看起来做了，实则废的”。动手前先用开发者工具确认标题节点是否带 id、是否可被 querySelector 捕获、滚动后元素是否真出现在视口顶部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
