Backtop 回到顶部

当页面或指定容器滚动到一定距离后显示按钮，点击后平滑滚动回顶部。

示例

基础用法

不指定 target 时，默认监听页面（window）滚动。滚动高度超过 visibility-height 后按钮自动显示，点击后平滑滚动回顶部。

指定容器

指定 target 为容器 ID 选择器，此时按钮会相对于容器绝对定位，放在容器右下角。

自定义位置

通过 right 和 bottom 控制按钮距离右侧和底部的距离。

API

Props

属性名	说明	类型	默认值
visibility-height	滚动高度达到该值后显示	number | string	200
target	触发滚动的目标容器	string | HTMLElement	''
right	距离右侧的距离	number | string	60
bottom	距离底部的距离	number | string	60

Events

事件名	说明	回调参数
click	点击按钮后触发	(event: MouseEvent)

Slots

插槽名	说明	作用域参数
default	自定义按钮内容	-

注意事项

• target 为字符串时仅支持 ID 选择器，例如 #scroll-container。
• 指定 target 后，应确保容器具备可滚动高度，并建议设置 position: relative 以便按钮在容器内定位。