开发预览更新于 2026-05-10

BackTop 返回顶部

滚动超过阈值后浮现的固定按钮，点击平滑回到容器顶部。

基础用法

target 指定要监听并滚动的容器（CSS 选择器）；省略则监听 window。visibilityHeight 控制按钮在滚出多少像素后才显形。

第 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">第 {{ 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}>第 {i + 1} 段内容…</p>)}
<CfBackTop target=".scroll-root" visibilityHeight={120} />
</div>

API

属性	类型	默认值	说明
`visibilityHeight`	`number`	`200`	滚动超过此值后按钮可见
`target`	`string`	`—`	要监听的容器选择器；省略时监听 `window`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	按钮尺寸
`duration`	`number`	`320`	平滑滚动时长（毫秒）