锚点目录

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

带行为核心包 1 个事件

示例

简介

锚点目录适合长页面。

用法

把目录放在内容旁边。

属性

data-offset、data-target。

在线试用 Markdown 版

代码

<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>

属性

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

事件

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

样式类

zh-anchor

当前节用 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。