BackTop 回到顶部

页面内容较长时，滚动到指定高度后显示回到顶部按钮。

返回页面顶部的操作按钮。

何时使用

  • 当页面内容较长，用户滚动后需要快速返回顶部时。
  • 需要在特定滚动高度显示回到顶部按钮时。

导入

import { BackTop } from "@reglow/reui";

代码演示

基础用法

BackTop 预设了基本的返回按钮，可以直接使用。

<script setup>
import { BackTop } from "@reglow/reui";
</script>

<template>
  <div>
    <p>向下滚动查看右下角的返回按钮</p>
    <!-- 页面内容 -->
    <BackTop />
  </div>
</template>

自定义样式

通过 style 覆盖默认样式。

<script setup>
import { BackTop } from "@reglow/reui";
import { ArrowUp } from "lucide-vue-next";
</script>

<template>
  <BackTop
    :style="{
      bottom: '100px',
      right: '50px',
      width: '40px',
      height: '40px',
      borderRadius: '100%',
      backgroundColor: '#0077fa',
      color: '#fff',
      border: 'none',
    }"
  >
    <ArrowUp class="size-4 text-white" />
  </BackTop>
</template>

自定义出现高度

通过 visibilityHeight 设置出现需要达到的滚动高度。

<template>
  <BackTop :visibility-height="200" />
</template>

自定义滚动时间

通过 duration 设置滚动到顶部的时间。

<template>
  <BackTop :duration="800" />
</template>

指定滚动容器

通过 target 指定监听滚动的元素。

<script setup>
import { ref } from "vue";
import { BackTop } from "@reglow/reui";

const containerRef = ref();
</script>

<template>
  <div ref="containerRef" class="h-400px overflow-auto">
    <!-- 长内容 -->
    <div class="h-2000px"></div>

    <BackTop :target="() => containerRef" />
  </div>
</template>

点击回调

<script setup>
const onClick = (e) => {
  console.log("点击了回到顶部");
};
</script>

<template>
  <BackTop @click="onClick" />
</template>

自定义内容

通过默认 slot 自定义按钮内容。

<script setup>
import { h } from "vue";
import { ChevronUp } from "lucide-vue-next";
</script>

<template>
  <BackTop>
    <div class="flex flex-col items-center">
      <ChevronUp class="size-4" />
      <span class="text-xs">顶部</span>
    </div>
  </BackTop>
</template>

API

Props

参数说明类型默认值
duration滚动到顶部的时间（毫秒）number450
visibilityHeight出现需要达到的滚动高度number400
target返回需要监听其滚动事件的元素() => HTMLElement | Window() => window
style自定义样式CSSProperties-
class附加类名string-

Events

事件说明回调参数
click点击事件(e: MouseEvent)

Slots

名称说明
default自定义按钮内容

默认样式

属性默认值
positionfixed
bottom50px
right100px
width40px
height40px
borderRadius9999px
zIndex10

可通过 style 属性覆盖以上默认样式。

Toast 轻提示
对用户操作做出及时反馈，顶部居中显示并自动消失。比 Notification 更轻量，通常仅一行内容。
ConfigProvider 全局化配置
为组件提供统一的语言、主题、尺寸等全局配置