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 段 — 滚动到底部，右下角会出现返回顶部按钮。
<script setup lang="ts">
import { CfBackTop } from '@chufix-design/vue';
</script>
<template>
<div class="demo-scroll-root" style="height: 600px; overflow-y: auto; border: 1px solid var(--line-1); border-radius: 8px; padding: 12px; position: relative;">
<p v-for="i in 24" :key="i">第 {{ i }} 段 — 滚动到底部，右下角会出现返回顶部按钮。</p>
<CfBackTop target=".demo-scroll-root" :visibility-height="120" />
</div>
</template>
<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