这叫啥 UI？
← 返回组件目录

COMPONENT 09 · Navigation & Orientation

锚点导航 / 目录

Anchor Navigation / Table of Contents

也叫Table of ContentsTOCOn-page Navigation页内目录

列出长页面中的章节，并滚动到同页对应标题。

Lists sections of a long page and jumps to headings within that page.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 章节链接
  • 锚点目标
  • 当前位置指示

适合使用

  • 文档或长文章需要快速浏览章节时。

不建议使用

  • 页面很短或内容顺序必须逐步完成时。

键盘与无障碍

  • 链接 href 指向唯一标题 id；处理固定头部偏移，并让目标标题可被聚焦。

DESCRIBE IT TO AI

这样告诉编程助手

实现锚点导航 / 目录（Anchor Navigation / Table of Contents）：列出长页面中的章节，并滚动到同页对应标题。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<article class="demo stack">
  <nav aria-label="页内目录">
    <ol class="row">
      <li>
        <a href="#overview">概览</a>
      </li>
      <li>
        <a href="#examples">示例</a>
      </li>
    </ol>
  </nav>
  <section id="overview" tabindex="-1">
    <h2>概览</h2>
    <p>介绍组件的用途。</p>
  </section>
  <section id="examples" tabindex="-1">
    <h2>示例</h2>
    <p>展示组件的实际效果。</p>
  </section>
</article>