锚点导航
Anchor
UI 组件也叫：页内导航、文章目录、Table of Contents、Scrollspy
一句话：列出当前页面各章节标题的小目录，点击跳到对应位置，滚动时自动高亮当前所在章节。
详细解释
锚点导航通常固定在长页面的右侧（文档站、长文章、长表单），是一列按层级缩进的章节标题。点击某一项，页面平滑滚动到对应章节；用户自己滚动页面时，目录会自动高亮当前正在看的章节，这种跟随高亮的效果在 Bootstrap 里叫 Scrollspy。它的原理是给每个章节标题设置 id，链接写成 #章节id。
和 标签页 的区别：标签页一次只显示一块内容，切换时其他内容被隐藏；锚点导航的所有内容都在同一页上，只是帮你快速跳转。和 侧边菜单 的区别：侧边菜单在不同页面之间跳转，锚点导航只在当前页面内部跳转。页面顶部有吸顶导航栏时，要给滚动位置留出偏移，否则章节标题会被导航栏挡住。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
文档页右侧加一个吸顶的锚点导航，列出本页的二级、三级标题，三级标题缩进一格；点击后平滑滚动到对应章节，并预留顶部导航栏 64px 的偏移；滚动时自动高亮当前章节，左侧用竖线加深色块标出位置；窄屏时隐藏。
结构与适用场景
结构描述
由一列可点击的章节标题链接组成，按层级缩进，左侧常有一条竖线和表示当前位置的高亮块。
适用场景
- 文档、帮助中心、长文章等需要在一页内多次跳转的长内容
- 页面有五个以上章节，用户需要知道自己读到了哪里
- 长表单或设置页，想让用户快速定位到某个分组
不适用场景
- 页面内容很短，一屏就能看完
- 需要在不同页面之间跳转，用侧边菜单或顶部导航
- 几块内容互相独立、同一时间只需看一块，用标签页
常见坏用法
- 点击后章节标题被吸顶导航栏挡住，没有预留偏移
- 滚动时高亮不跟随，或同时高亮好几项
- 目录列出了所有四五级小标题，比正文还长
识别特征
- 页面右侧一列小号文字链接，按层级缩进
- 其中一项加深或变色，左侧有一小段竖线高亮
- 滚动页面时高亮项跟着变化
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-anchor-wrapper.el-anchor.arco-anchor.t-anchor.n-anchor.table-of-contents.toc.VPDocAsideOutlinenav[aria-label*="目录"]nav[aria-label*="contents" i]aside nav:has(a[href^="#"]):not(:has(a:not([href^="#"]), a[href^="#/"]))