跳到主要内容
Termlib

UI 组件 · 导航

锚点导航

Anchor

也叫：页内导航、文章目录、Table of Contents、Scrollspy

列出当前页面各章节标题的小目录，点击跳到对应位置，滚动时自动高亮当前所在章节。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

文档页右侧加一个吸顶的锚点导航，列出本页的二级、三级标题，三级标题缩进一格；点击后平滑滚动到对应章节，并预留顶部导航栏 64px 的偏移；滚动时自动高亮当前章节，左侧用竖线加深色块标出位置；窄屏时隐藏。

发给

01判断

你的内容是这样吗？

对照两列，确认锚点导航是不是你要找的。

符合这些情况，用锚点导航

  • 文档、帮助中心、长文章等需要在一页内多次跳转的长内容
  • 页面有五个以上章节，用户需要知道自己读到了哪里
  • 长表单或设置页，想让用户快速定位到某个分组

是这些情况，换成别的

  • 页面内容很短，一屏就能看完

  • 需要在不同页面之间跳转，用侧边菜单或顶部导航

    改用侧边菜单

  • 几块内容互相独立、同一时间只需看一块

    改用标签页

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    点击后章节标题被吸顶导航栏挡住，没有预留偏移

  2. 02

    滚动时高亮不跟随，或同时高亮好几项

  3. 03

    目录列出了所有四五级小标题，比正文还长

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一列可点击的章节标题链接组成，按层级缩进，左侧常有一条竖线和表示当前位置的高亮块。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1页面右侧一列小号文字链接，按层级缩进
  2. 2其中一项加深或变色，左侧有一小段竖线高亮
  3. 3滚动页面时高亮项跟着变化

04解释

详细解释

锚点导航通常固定在长页面的右侧（文档站、长文章、长表单），是一列按层级缩进的章节标题。点击某一项，页面平滑滚动到对应章节；用户自己滚动页面时，目录会自动高亮当前正在看的章节，这种跟随高亮的效果在 Bootstrap 里叫 Scrollspy。它的原理是给每个章节标题设置 id，链接写成 #章节id。

和 标签页 的区别：标签页一次只显示一块内容，切换时其他内容被隐藏；锚点导航的所有内容都在同一页上，只是帮你快速跳转。和 侧边菜单 的区别：侧边菜单在不同页面之间跳转，锚点导航只在当前页面内部跳转。页面顶部有吸顶导航栏时，要给滚动位置留出偏移，否则章节标题会被导航栏挡住。

开发者信息
术语 ID
component-anchor
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-anchor-wrapper
  • .el-anchor
  • .arco-anchor
  • .t-anchor
  • .n-anchor
  • .table-of-contents
  • .toc
  • .VPDocAsideOutline
  • nav[aria-label*="目录"]
  • nav[aria-label*="contents" i]
  • aside nav:has(a[href^="#"]):not(:has(a:not([href^="#"]), a[href^="#/"]))
  • nav[aria-label*="本页"]
  • aside:has(> nav a[href^="#"]):not(:has(a:not([href^="#"]), a[href^="#/"]))
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • toc
  • table-of-contents
  • on-this-page
  • anchor-nav
  • doc-toc
  • page-toc
  • toc-list
  • page-outline
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Anchor
  • TableOfContents
  • Toc
  • OnThisPage
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30