BackTop 回到顶部

当滚动区域滚动到一定高度后，显示返回顶部按钮，点击后平滑滚动到顶部。

基础用法

在卡片内向下滚动，右下角出现回到顶部按钮，点击即可回到顶部。

第 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 行内容 — 继续向下滚动查看效果

主要样式

设置 type=primary 使按钮使用主题色背景。

第 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 行 — 主要样式按钮

方形按钮

设置 shape=square 使用圆角方形按钮。

第 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 行 — 方形按钮

自定义位置与尺寸

通过 right / bottom 调整位置，size 调整大小。

第 1 行 — 右下偏移 24px，尺寸 48px

第 2 行 — 右下偏移 24px，尺寸 48px

第 3 行 — 右下偏移 24px，尺寸 48px

第 4 行 — 右下偏移 24px，尺寸 48px

第 5 行 — 右下偏移 24px，尺寸 48px

第 6 行 — 右下偏移 24px，尺寸 48px

第 7 行 — 右下偏移 24px，尺寸 48px

第 8 行 — 右下偏移 24px，尺寸 48px

第 9 行 — 右下偏移 24px，尺寸 48px

第 10 行 — 右下偏移 24px，尺寸 48px

第 11 行 — 右下偏移 24px，尺寸 48px

第 12 行 — 右下偏移 24px，尺寸 48px

第 13 行 — 右下偏移 24px，尺寸 48px

第 14 行 — 右下偏移 24px，尺寸 48px

第 15 行 — 右下偏移 24px，尺寸 48px

第 16 行 — 右下偏移 24px，尺寸 48px

第 17 行 — 右下偏移 24px，尺寸 48px

第 18 行 — 右下偏移 24px，尺寸 48px

第 19 行 — 右下偏移 24px，尺寸 48px

第 20 行 — 右下偏移 24px，尺寸 48px

第 21 行 — 右下偏移 24px，尺寸 48px

第 22 行 — 右下偏移 24px，尺寸 48px

第 23 行 — 右下偏移 24px，尺寸 48px

第 24 行 — 右下偏移 24px，尺寸 48px

第 25 行 — 右下偏移 24px，尺寸 48px

第 26 行 — 右下偏移 24px，尺寸 48px

第 27 行 — 右下偏移 24px，尺寸 48px

第 28 行 — 右下偏移 24px，尺寸 48px

第 29 行 — 右下偏移 24px，尺寸 48px

第 30 行 — 右下偏移 24px，尺寸 48px

自定义内容

通过默认插槽自定义按钮内部内容。

第 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 行 — 自定义内容插槽

动画时长

通过 duration 控制回到顶部的滚动动画时长(ms)，设为 0 则立即跳转。

当前：默认 500ms

第 1 行 — 默认 500ms

第 2 行 — 默认 500ms

第 3 行 — 默认 500ms

第 4 行 — 默认 500ms

第 5 行 — 默认 500ms

第 6 行 — 默认 500ms

第 7 行 — 默认 500ms

第 8 行 — 默认 500ms

第 9 行 — 默认 500ms

第 10 行 — 默认 500ms

第 11 行 — 默认 500ms

第 12 行 — 默认 500ms

第 13 行 — 默认 500ms

第 14 行 — 默认 500ms

第 15 行 — 默认 500ms

第 16 行 — 默认 500ms

第 17 行 — 默认 500ms

第 18 行 — 默认 500ms

第 19 行 — 默认 500ms

第 20 行 — 默认 500ms

第 21 行 — 默认 500ms

第 22 行 — 默认 500ms

第 23 行 — 默认 500ms

第 24 行 — 默认 500ms

第 25 行 — 默认 500ms

第 26 行 — 默认 500ms

第 27 行 — 默认 500ms

第 28 行 — 默认 500ms

第 29 行 — 默认 500ms

第 30 行 — 默认 500ms

监听事件

click 事件和 show 事件。

第 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 行 — 滚动查看事件

点击次数：0 | 显示状态：已隐藏

多种组合

下方默认圆形、上方主要方形，同时作用于同一滚动容器。

第 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 行 — 双按钮组合

Props

参数	类型	默认值	说明
`visibilityHeight`	`number`	`400`	滚动高度达到此值后显示按钮(px)
`right`	`number`	`40`	距离右侧距离(px)
`bottom`	`number`	`40`	距离底部距离(px)
`target`	`() => HTMLElement \| null`	`—`	监听滚动的目标容器，默认为 window
`duration`	`number`	`500`	回到顶部动画时长(ms)，0 为立即跳转
`type`	`'default' \| 'primary'`	`'default'`	按钮类型：默认白底或主题色
`shape`	`'circle' \| 'square'`	`'circle'`	按钮形状
`size`	`number`	`40`	按钮尺寸(px)

Events

事件名	类型	说明
`click`	`() => void`	点击按钮时触发
`show`	`(visible: boolean) => void`	按钮显示/隐藏状态变化时触发

Slots

插槽名	说明
`default`	自定义按钮内容，默认为向上箭头图标