# 锚点目录

长页面的“本页目录”：一列指向页内各节的链接，滚动时自动标出当前所在的一节，点击平滑滚动过去。适合文档、设置页的右侧。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<div style="display:flex;gap:24px;align-items:flex-start">
  <nav data-zh-anchor data-target="#an-box" data-offset="8" style="width:12rem;flex:none">
    <ul>
      <li><a href="#an-a">简介</a></li>
      <li><a href="#an-b">用法</a>
        <ul><li><a href="#an-c">属性</a></li></ul>
      </li>
    </ul>
  </nav>
  <div id="an-box" tabindex="0" role="region" aria-label="文档内容" style="height:12rem;overflow:auto;flex:1;min-width:0;padding:0 16px;border:1px solid var(--zh-border);border-radius:var(--zh-radius-md)">
    <p id="an-a" style="margin-top:0"><strong>简介</strong></p><p style="height:7rem">锚点目录适合长页面。</p>
    <p id="an-b"><strong>用法</strong></p><p style="height:7rem">把目录放在内容旁边。</p>
    <p id="an-c"><strong>属性</strong></p><p style="height:9rem">data-offset、data-target。</p>
  </div>
</div>
```

## 样式类

`zh-anchor`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-zh-anchor` | <nav> | 里面放 <ul><li><a href="#节的id"> | 声明为锚点目录；嵌套的 <ul> 表示二级标题 |
| `data-offset` | <nav> | 像素，默认 16 | 滚动后目标离顶部保留的距离；页面有吸顶导航条时设成它的高度 |
| `data-target` | <nav> | 选择器 | 内容在某个可滚动容器里时，监听它而不是整个页面 |

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:anchor-change` | <nav> | undefined | 当前所在的一节变化 |

## 无障碍

- 当前节用 aria-current="location" 标出
- 点击后目标节获得焦点（不再触发二次滚动），键盘用户可继续往下读
- 给 <nav> 加 aria-label，默认是“本页目录”
- 系统开启“减少动态效果”时直接跳转，不做平滑滚动
- 链接的目标 id 必须存在，否则该项被忽略

## 常见问题

### 锚点目录是什么？

长页面的“本页目录”：一列指向页内各节的链接，滚动时自动标出当前所在的一节，点击平滑滚动过去。适合文档、设置页的右侧。

### 怎么使用锚点目录？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 锚点目录有哪些事件？

zh:anchor-change（当前所在的一节变化）。

### 锚点目录支持键盘和读屏吗？

当前节用 aria-current="location" 标出；点击后目标节获得焦点（不再触发二次滚动），键盘用户可继续往下读；给 <nav> 加 aria-label，默认是“本页目录”。

### 锚点目录需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。