ToTopIcon 回到顶部

固定在视口右下角（默认 position: fixed）的「回到顶部」悬浮按钮。监听滚动容器的 scroll 事件，当滚动距离超过 boundaryStart 时淡入显示，点击后平滑滚动回顶部；当接近底部（boundaryEnd）时按钮会自动上移避免遮挡。

基础用法

整页滚动，超过 300px 出现

right/bottom 24、size 48、自定义背景

默认插槽自定义文案

查看代码

<template>
    <div style="display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start">
        <!-- 基础用法：监听整页滚动（省略 target，默认 document） -->
        <div style="text-align: center">
            <ToTopIcon />
            <div style="margin-top: 8px; font-size: 12px; color: #888">
                整页滚动，超过 {{ start }}px 出现
            </div>
        </div>

        <!-- 自定义位置、尺寸、背景 -->
        <div style="text-align: center">
            <ToTopIcon :boundary-start="120" :right="24" :bottom="24" :size="48" bg="#646cff" />
            <div style="margin-top: 8px; font-size: 12px; color: #888">
                right/bottom 24、size 48、自定义背景
            </div>
        </div>

        <!-- 使用默认插槽自定义内容 -->
        <div style="text-align: center">
            <ToTopIcon :boundary-start="200" bg="#e5484d">
                <span style="font-size: 12px; font-weight: 600">TOP</span>
            </ToTopIcon>
            <div style="margin-top: 8px; font-size: 12px; color: #888">
                默认插槽自定义文案
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ToTopIcon } from "@a-drowned-fish/rox-v";

const start = 300;
</script>

Props

参数	说明	类型	默认值
target	监听滚动的元素，可传 ref	Element | null | undefined	undefined（整页）
boundaryStart	滚动超过该像素值（px）后显示按钮	number	300
boundaryEnd	距底部小于该像素值（px）时，按钮 bottom 自动调整为该值	number	300
left	距左侧距离（px）	number	—
right	距右侧距离（px）	number	100
top	距顶部距离（px）	number	—
bottom	距底部距离（px）	number	100
bg	按钮背景色	string	"rgba(0,0,0,0.3)"
size	图标尺寸（数字，单位 px，作用于箭头 SVG 宽高）	number	32

Slots

插槽名	说明
default	自定义按钮内容；不提供时显示默认的上箭头 SVG

说明

• 组件使用 position: fixed 定位在视口内，位置由 left/right/top/bottom（px）决定。
• 监听目标通过 target 传入：传某个滚动容器的 ref 即可只在该容器内生效；不传则作用于整页。
• 点击按钮平滑回到顶部，逻辑在组件内部，无需额外处理。