锚点id必须合法唯一且严格匹配：全小写、连字符分隔、不以数字开头、无空格标点中文；h2/h3需同时处理并嵌套生成目录；href必须与id完全一致（含大小写）；启用scroll-behavior: smooth实现平滑滚动。
锚点 id 必须合法且唯一，否则跳转失效
浏览器只认 id 属性做锚点目标，但不是随便写个字符串就有效。常见失效原因：id 里含空格、中文、标点、开头是数字（如 id="1.简介"），或多个标题用了同一个 id（比如都叫 section）。结果是点击后不动、跳到第一个匹配项，或 CSS/JS 选择失败。
生成规则要手动盯住或用脚本强制处理：
- 全小写 + 连字符（
-）替代空格和符号，例如“用户登录流程” →user-login-flow - 避免以数字开头，
id="2-intro"改成id="intro-2" - 中文需转义或过滤，可用正则
.replace(/[^a-z0-9\u4e00-\u9fa5]+/gi, '-')后再 trim 两端横线 - 同一页面内所有
id值必须全局唯一，重复会导致document.getElementById和锚点跳转都只命中第一个
动态生成目录时，h2 和 h3 都得抓，不能漏
只选 h2 会丢掉二级标题，只选 h3 又没结构层级。实际目录需要体现“章-节”关系，所以必须同时处理两级标题，并在生成的 <nav></nav> 列表中反映嵌套逻辑。
关键操作：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
document.querySelectorAll('h2, h3')一次性获取全部目标元素 - 遍历时判断
el.tagName === 'H2'还是'H3'，决定生成一级还是二级<li> - 每个标题都要检查
el.id，为空就按规则自动生成；不补 id 的话，生成的href就是#undefined，点不了 - 插入目录建议用
toc.innerHTML = htmlString一次性写入，别用循环appendChild，容易因 DOM 重排变慢或出错
href 必须严格匹配 id，大小写敏感且不能多空格
链接写成 href="#User-Login-Flow"，但目标是 id="user-login-flow"？跳转失败。或者中间多了个空格、全角短横、下划线，都会断链。这是最常被忽略的细节。
验证要点：
-
href值必须是#加上目标元素的id字符串，完全一致（包括大小写） - 不要手写拼接，优先用
el.id直接取值：href="#${el.id}" - 如果用了 JS 生成 id，确保生成逻辑和链接引用逻辑用的是同一套函数，别一个用
toLowerCase()，另一个没处理 - 调试时右键检查链接，看
href是不是你预期的值；再检查目标元素有没有那个id，且没被其他脚本覆盖
平滑滚动不是默认行为，得主动加 scroll-behavior: smooth
原生锚点跳转是瞬间滚动，体验生硬，尤其长页面容易让用户迷失位置。这不是 bug，是浏览器默认行为。
修复很简单，但必须加在根容器上：
- 在
或上加内联样式或 CSS 规则：scroll-behavior: smooth - 注意：该属性不支持 IE，如需兼容旧环境，得用 JS 模拟，比如
el.scrollIntoView({ behavior: 'smooth' }) - 加了这个之后，还要确认目标元素在视口内可聚焦——某些情况下（如 display: none 或 visibility: hidden），滚动会失效或偏移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
