组件
回到顶部 Back Top
BackTop：回到顶部按钮。页面滚动超过 `threshold` 后，小型浮动按钮出现在页面角落，并把使用者带回顶部。滚动保持原生行为——`window.scrollTo` 遵循样式表的 `scroll-behavior: smooth`；reduced motion 会改回即时跳转（自带滚动容器的控件没有样式表可遵循，因此直接查询 media query）。两种情况下按钮都保持挂载，进场走过渡而不是突然出现。控件复用共享 `Button`（outline、方形）；纸面、发丝线和聚焦光晕由它提供，这个家族只负责浮动和进场。
#基础用法
Passage 1 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 2 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 3 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 4 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 5 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 6 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 7 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 8 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 9 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 10 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 11 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
Passage 12 — the box travels far enough for the way home to earn its keep. Keep scrolling and the little tile rises at the corner of the paper.
<script setup lang="ts">
import { BackTop } from "@bysages/vue";
import { ref } from "vue";
const passages = 12;
const scroller = ref<HTMLElement | null>(null);
const scrollEl = () => scroller.value;
</script>
<template>
<!-- The demo rides its own scroller: the control moors inside the
box's corner instead of floating over the whole page. -->
<div ref="scroller" class="relative h-72 overflow-y-auto border border-border rounded-md p-4">
<p v-for="n in passages" :key="n" class="mb-4 leading-relaxed text-secondary">
Passage {{ n }} — the box travels far enough for the way home to earn its keep. Keep scrolling
and the little tile rises at the corner of the paper.
</p>
<BackTop :scroll-el="scrollEl" :threshold="160" />
</div>
</template>
Passage 1 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 2 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 3 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 4 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 5 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 6 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 7 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 8 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 9 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 10 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 11 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 12 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 13 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 14 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 15 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
Passage 16 — a larger threshold: the tile waits until the reader is properly lost before offering the way home.
<script setup lang="ts">
import { BackTop } from "@bysages/vue";
import { ref } from "vue";
const passages = 16;
const scroller = ref<HTMLElement | null>(null);
const scrollEl = () => scroller.value;
</script>
<template>
<!-- Moored like the basic demo, but the tile waits longer before it
rises — 600 px of the box's own travel. -->
<div ref="scroller" class="relative h-72 overflow-y-auto border border-border rounded-md p-4">
<p v-for="n in passages" :key="n" class="mb-4 leading-relaxed text-secondary">
Passage {{ n }} — a larger threshold: the tile waits until the reader is properly lost before
offering the way home.
</p>
<BackTop :scroll-el="scrollEl" :threshold="600" label="Return to the beginning" />
</div>
</template>
#属性
#BackTop
BackTop：回到顶部按钮。页面滚动超过 threshold 后，小型浮动按钮出现在页面角落，并把使用者带回顶部。滚动保持原生行为——window.scrollTo 遵循样式表的 scroll-behavior: smooth；reduced motion 会改回即时跳转（自带滚动容器的控件没有样式表可遵循，因此直接查询 media query）。两种情况下按钮都保持挂载，进场走过渡而不是突然出现。控件复用共享 Button（outline、方形）；纸面、发丝线和聚焦光晕由它提供，这个家族只负责浮动和进场。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
threshold | Number | 400 | — |
label | String | "Back to top" | — |
scrollEl | Function | undefined | — |