Backtop 返回顶部
返回页面顶部的操作按钮，当页面滚动到一定高度时自动显示。
基础用法
滑动页面即可看到右下方的返回顶部按钮，默认在滚动超过 200px 时显示。
滚动页面查看返回顶部按钮（第 1 段）
滚动页面查看返回顶部按钮（第 2 段）
滚动页面查看返回顶部按钮（第 3 段）
滚动页面查看返回顶部按钮（第 4 段）
滚动页面查看返回顶部按钮（第 5 段）
滚动页面查看返回顶部按钮（第 6 段）
滚动页面查看返回顶部按钮（第 7 段）
滚动页面查看返回顶部按钮（第 8 段）
滚动页面查看返回顶部按钮（第 9 段）
滚动页面查看返回顶部按钮（第 10 段）
滚动页面查看返回顶部按钮（第 11 段）
滚动页面查看返回顶部按钮（第 12 段）
滚动页面查看返回顶部按钮（第 13 段）
滚动页面查看返回顶部按钮（第 14 段）
滚动页面查看返回顶部按钮（第 15 段）
滚动页面查看返回顶部按钮（第 16 段）
滚动页面查看返回顶部按钮（第 17 段）
滚动页面查看返回顶部按钮（第 18 段）
滚动页面查看返回顶部按钮（第 19 段）
滚动页面查看返回顶部按钮（第 20 段）
自定义位置和内容
通过 position 设置按钮位置，使用默认插槽自定义按钮内容。
自定义返回顶部按钮（第 1 段）
自定义返回顶部按钮（第 2 段）
自定义返回顶部按钮（第 3 段）
自定义返回顶部按钮（第 4 段）
自定义返回顶部按钮（第 5 段）
自定义返回顶部按钮（第 6 段）
自定义返回顶部按钮（第 7 段）
自定义返回顶部按钮（第 8 段）
自定义返回顶部按钮（第 9 段）
自定义返回顶部按钮（第 10 段）
指定滚动容器
通过 target 指定需要监听滚动的容器。
容器内滚动内容（第 1 段）
容器内滚动内容（第 2 段）
容器内滚动内容（第 3 段）
容器内滚动内容（第 4 段）
容器内滚动内容（第 5 段）
容器内滚动内容（第 6 段）
容器内滚动内容（第 7 段）
容器内滚动内容（第 8 段）
容器内滚动内容（第 9 段）
容器内滚动内容（第 10 段）
容器内滚动内容（第 11 段）
容器内滚动内容（第 12 段）
容器内滚动内容（第 13 段）
容器内滚动内容（第 14 段）
容器内滚动内容（第 15 段）
容器内滚动内容（第 16 段）
容器内滚动内容（第 17 段）
容器内滚动内容（第 18 段）
容器内滚动内容（第 19 段）
容器内滚动内容（第 20 段）
容器内滚动内容（第 21 段）
容器内滚动内容（第 22 段）
容器内滚动内容（第 23 段）
容器内滚动内容（第 24 段）
容器内滚动内容（第 25 段）
容器内滚动内容（第 26 段）
容器内滚动内容（第 27 段）
容器内滚动内容（第 28 段）
容器内滚动内容（第 29 段）
容器内滚动内容（第 30 段）
Backtop API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
target | 滚动目标元素选择器 | string | ''（window） |
visibilityHeight | 显示阈值（px） | number | 200 |
position | 按钮位置 | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'bottom-right' |
right | 右侧偏移（px） | number | 40 |
bottom | 底部偏移（px） | number | 40 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
click | 点击时 | (event: MouseEvent) |
show | 按钮显示时 | — |
hide | 按钮隐藏时 | — |
Slots
| 插槽名 | 说明 |
|---|---|
default | 自定义按钮内容（默认显示箭头图标） |