返回顶部
滚动超过一段距离后出现的圆形按钮，点击平滑回到顶部；系统开启“减少动态效果”时直接跳回。
带行为 核心包 1 个事件
示例
代码
<button class="zh-backtop" data-zh-backtop data-threshold="200"></button>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-zh-backtop | <button>（可为空） | 声明为返回顶部按钮；空按钮会自动放入向上的箭头图标和 aria-label | |
data-threshold | 按钮 | 像素，默认 400 | 滚动超过多少像素后出现 |
data-target | 按钮 | 选择器 | 监听某个可滚动容器而不是整页；这时按钮不会固定在视口，需要你自己定位 |
事件
| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
zh:backtop | 按钮 | 无 | 点击回到顶部时触发 |
样式类
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。