BackTop
back-top回顶 · 监听滚动容器超 visibilityHeight 淡入 + scrollTo smooth + prefers-reduced-motion 降级 auto(零依赖)
用法
基础用法
默认监听 window，滚动超过 visibilityHeight 后右下角淡入回顶钮，点击平滑滚回顶部。
滚动内容行 1 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 2 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 3 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 4 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 5 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 6 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 7 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 8 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 9 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 10 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 11 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 12 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 13 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 14 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 15 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 16 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 17 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 18 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 19 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 20 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 21 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 22 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 23 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 24 —— 向下滚动 80px 后右下角出现回顶按钮。
<BackTop visibilityHeight={400} />自定义内容
children 替换默认上箭头图标，可放文字或自定义节点。
滚动内容行 1 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 2 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 3 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 4 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 5 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 6 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 7 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 8 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 9 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 10 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 11 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 12 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 13 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 14 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 15 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 16 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 17 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 18 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 19 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 20 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 21 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 22 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 23 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 24 —— 向下滚动 80px 后右下角出现回顶按钮。
<BackTop visibilityHeight={400}>
<span className="px-2 text-xs font-medium">顶部</span>
</BackTop>指定滚动容器
页面滚动体不是 window 时，target 返回该容器元素，监听与回顶都落到它身上。
滚动内容行 1 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 2 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 3 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 4 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 5 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 6 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 7 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 8 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 9 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 10 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 11 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 12 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 13 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 14 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 15 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 16 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 17 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 18 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 19 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 20 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 21 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 22 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 23 —— 向下滚动 80px 后右下角出现回顶按钮。
滚动内容行 24 —— 向下滚动 80px 后右下角出现回顶按钮。
const ref = useRef<HTMLDivElement>(null);
<div ref={ref} className="h-44 overflow-y-auto">{/* 长内容 */}</div>
<BackTop target={() => ref.current} visibilityHeight={80} />何时用
长页面滚动超过一定高度后，在右下角淡入一颗悬浮按钮，点击平滑回到顶部。只想要回顶单一动作时用它；需要把任意内容钉在视口某处用 Affix；需要页内锚点跳转用 Anchor。
导入
import { BackTop } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| target | () => HTMLElement | Window | null | window | 滚动监听 & 回顶的目标容器（返回容器元素或 window）。 |
| visibilityHeight | number | 400 | 滚动超过该高度(px)才淡入显示。 |
| className | string | — | 默认 fixed 贴视口右下；可覆盖为 absolute 收进局部容器。 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClick | () => void | 点击回顶后的回调（在滚动触发之后）。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 自定义悬浮按钮内容。默认上箭头图标。 |
禁忌 / 坑
- 默认
fixed贴整页视口右下；放进局部滚动区时必须同时传target（指向该容器）并用className覆盖为absolute，否则按钮会飘到整页角落、且监听的是 window 滚动而非容器滚动。 - 已内置
prefers-reduced-motion降级（smooth → auto），无需消费侧处理。
相关
Tabs · Breadcrumb · Pagination · Anchor · Affix · Stepper