开发预览更新于 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 段 — 滚动到底部，右下角会出现返回顶部按钮。

src/App.vue

<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>

<script setup>
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>

import { CfBackTop } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-scroll-root" style={{ height: 600, overflowY: "auto", border: "1px solid var(--line-1)", borderRadius: 8, padding: 12, position: "relative" }}>
          <p v-for="i in 24" key={i}>第 {i} 段 — 滚动到底部，右下角会出现返回顶部按钮。</p>
          <CfBackTop target=".demo-scroll-root" visibilityHeight={120} />
        </div>
    </>
  );
}

import { CfBackTop } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-scroll-root" style={{ height: 600, overflowY: "auto", border: "1px solid var(--line-1)", borderRadius: 8, padding: 12, position: "relative" }}>
          <p v-for="i in 24" key={i}>第 {i} 段 — 滚动到底部，右下角会出现返回顶部按钮。</p>
          <CfBackTop target=".demo-scroll-root" visibilityHeight={120} />
        </div>
    </>
  );
}

API

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

Events

Vue 事件	React 回调	载荷类型	说明
`click`	`onClick`	—	用户点击按钮时触发；组件随后开始平滑滚回顶部