BackTop
Floating button that appears after scrolling past a threshold and smooth-scrolls back to the top.
Basic usage
target specifies the container to monitor and scroll (CSS selector); omit it to listen on window. visibilityHeight is how many pixels of scroll must occur before the button appears.
第 1 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 2 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 3 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 4 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 5 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 6 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 7 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 8 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 9 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 10 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 11 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 12 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 13 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 14 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 15 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 16 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 17 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 18 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 19 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 20 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 21 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 22 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 23 段 — 滚动到底部，右下角会出现返回顶部按钮。
第 24 段 — 滚动到底部，右下角会出现返回顶部按钮。
<div class="scroll-root" style="height: 600px; overflow-y: auto;">
<p v-for="i in 24" :key="i">Paragraph {{ i }}…</p>
<CfBackTop target=".scroll-root" :visibility-height="120" />
</div><div className="scroll-root" style={{ height: 600, overflowY: 'auto' }}>
{Array.from({ length: 24 }, (_, i) => <p key={i}>Paragraph {i + 1}…</p>)}
<CfBackTop target=".scroll-root" visibilityHeight={120} />
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
visibilityHeight | number | 200 | Button becomes visible after scrolling past this value |
target | string | — | Container selector to monitor; omit to listen on window |
size | 'sm' | 'md' | 'lg' | 'md' | Button size |
duration | number | 320 | Smooth scroll duration (ms) |
反馈与讨论
BackTop · Discussion