Components

Back Top

A way home: after the page has scrolled past `threshold`, a small floating control rises at the page's corner and returns the reader to the top. The scroll itself stays native — `window.scrollTo` defers to the stylesheet's `scroll-behavior: smooth`, which reduced motion turns back into an instant jump (a moored control asks the media query directly, since a scroller of its own has no stylesheet to defer to). The button stays mounted either way so the entrance is a transition, never a pop. The control itself is the shared `Button` (outline, square) — the paper, hairline and halo are its; this family owns only the floating and the entrance.

#Basic usage

back-top/basic Vue React

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.

back-top/basic.vue

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

back-top/custom-threshold Vue React

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.

back-top/custom-threshold.vue

<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&nbsp;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>

#Props

#BackTop

A way home: after the page has scrolled past threshold, a small floating control rises at the page's corner and returns the reader to the top. The scroll itself stays native — window.scrollTo defers to the stylesheet's scroll-behavior: smooth, which reduced motion turns back into an instant jump (a moored control asks the media query directly, since a scroller of its own has no stylesheet to defer to). The button stays mounted either way so the entrance is a transition, never a pop.

The control itself is the shared Button (outline, square) — the paper, hairline and halo are its; this family owns only the floating and the entrance.

Prop	Type	Default	Description
`threshold`	`Number`	`400`	—
`label`	`String`	`"Back to top"`	—
`scrollEl`	`Function`	`undefined`	—