ScrollTop

Back-to-top button past a threshold

A back-to-top button for long pages, shown once the reader has scrolled a way down (threshold). Short pages don't need one.

Basic

Scroll this page past 300px — a skewed ↑ button appears bottom-right (fixed to the window).

<script setup lang="ts">
import { BlessScrollTop } from "blessing-ui";
</script>

<template>
  <small
    >Scroll this page past 300px — a skewed ↑ button appears bottom-right (fixed to the
    window).</small
  >
  <BlessScrollTop />
</template>

• It scrolls smoothly, or jumps straight up under reduced motion.
• target watches a scroll container instead of the window; label names the button.

Usage

import { BlessScrollTop } from "blessing-ui";

API

Props

Name	Type	Default	Description
threshold	number	300	px scrolled before the button shows
target	HTMLElement | null	—	scroll container; default window
label	string	"Back to top"
position	"bottom-right" | "bottom-left"	"bottom-right"

Slots

Name	Scope	Description
default	—