# 返回顶部

滚动超过一段距离后出现的圆形按钮，点击平滑回到顶部；系统开启“减少动态效果”时直接跳回。

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

## 用法

```html
<button class="zh-backtop" data-zh-backtop data-threshold="200"></button>
```

## 样式类

`zh-backtop`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-zh-backtop` | <button>（可为空） |  | 声明为返回顶部按钮；空按钮会自动放入向上的箭头图标和 aria-label |
| `data-threshold` | 按钮 | 像素，默认 400 | 滚动超过多少像素后出现 |
| `data-target` | 按钮 | 选择器 | 监听某个可滚动容器而不是整页；这时按钮不会固定在视口，需要你自己定位 |

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:backtop` | 按钮 | 无 | 点击回到顶部时触发 |

## 无障碍

- 未出现时 aria-hidden=true 且不可聚焦
- 按钮没有文字时自动加 aria-label="返回顶部"；你也可以自己写

## 常见问题

### 返回顶部是什么？

滚动超过一段距离后出现的圆形按钮，点击平滑回到顶部；系统开启“减少动态效果”时直接跳回。

### 怎么使用返回顶部？

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

### 返回顶部有哪些事件？

zh:backtop（点击回到顶部时触发）。

### 返回顶部支持键盘和读屏吗？

未出现时 aria-hidden=true 且不可聚焦；按钮没有文字时自动加 aria-label="返回顶部"；你也可以自己写。

### 返回顶部需要依赖框架吗？

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