Skip to content

BackTop 回到顶部

返回页面顶部的按钮。

示例

自定义滚动容器

可访问性

BackTop 默认渲染为带有 aria-label="Back to top" 的按钮,避免辅助技术读取装饰性箭头符号。可以通过 aria-label 提供本地化或更贴合业务语境的按钮名称。

点击按钮时组件会先调用传入的 onClick,如果事件未被 preventDefault() 阻止,再执行平滑滚动到页面顶部或 target 指定容器顶部。

API

属性说明类型默认值
visibilityHeight滚动高度达到此参数值才出现number200
target自定义滚动容器() => HTMLElement | Window | null() => window
children自定义按钮内容ReactNode'↑ Top'
aria-label按钮可访问名称string'Back to top'
onClick点击回调;可通过 event.preventDefault() 阻止默认滚动(event: MouseEvent<HTMLButtonElement>) => void-