长页面目录导航需用原生语义结构+轻量JS实现：自动扫描h2/h3生成锚点，IntersectionObserver高亮，fixed头部偏移校正，移动端用visibility隐藏并确保键盘焦点，锚点跳转需scroll-margin适配。
长页面里加目录导航，不是加个 <nav></nav> 就完事——它得能实时响应滚动、锚点跳转不偏移、小屏幕不糊、还不能拖慢页面。核心就一条：用原生语义化结构 + 轻量级 JS 控制，别堆框架。
目录项怎么生成才不手动维护
硬写 <li><a href="#section1">第一章</a></li> 会随内容增减迅速失效。更稳的做法是靠 JS 扫描页面标题自动生成：
- 只扫描
<h2></h2>或<h3></h3>（避免<h1></h1>干扰主标题） - 用
textContent提取文字，再用id属性自动补上锚点（比如 “第二章” →id="section2"），不依赖人工写id - 遇到重复标题时，自动追加序号，比如 “常见问题” 出现三次，生成
id="common-questions-1"、id="common-questions-2"
滚动时目录高亮不准的典型原因
常见现象是滚到 <h2 id="api"></h2> 区域了，但目录里 “API 接口” 还没变色。这不是 JS 写错了，而是计算时机或偏移量没对齐：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 页面有固定头部（
position: fixed）？必须在判断高亮时减去它的高度，否则getBoundingClientRect().top会把标题“压”在视口上方 - 用
IntersectionObserver代替scroll事件监听，性能更好，且能设threshold: [0.1]控制触发灵敏度 - 别用
offsetTop算位置——它不含 margin、transform 偏移，容易错；优先用getBoundingClientRect()配合window.scrollY
移动端目录收起/展开逻辑怎么不翻车
桌面端显示全部，手机端默认折叠，点「目录」按钮才展开——这个交互看似简单，但容易卡在两个地方：
立即学习“前端免费学习笔记（深入）”；
- 用
display: none直接隐藏整个<nav></nav>，会导致 JS 初始化时读不到子元素高度，后续滚动高亮失效；改用visibility: hidden; height: 0; overflow: hidden;更稳妥 - 点击展开后，焦点没落到第一个可聚焦元素（比如第一个
<a></a>），对键盘用户不友好；加一句nav.querySelector('a').focus() - 触摸设备上，快速连点两次「展开」可能触发两次动画，用
element.classList.toggle('open', true)配合 CSS transition，而不是反复切display
真正难的不是写出目录，而是让每个锚点跳转后，标题不被顶部导航栏遮住、滚动停准、且不闪动重排。这些细节全藏在 scroll margin、scroll-behavior 和 IntersectionObserver 的 threshold 里，少调一个参数，体验就断一截。
