Scroll To Top

Floating button that scrolls the page to the top. Appears after the user scrolls past a threshold, and takes the surface under it the way Surface Header does: the glass variant over a dark section or a photo, cn-glass-light over a light one.

Default

Drop once at the page root. Becomes visible after 1000px of scroll.

Dark previewReplay previewOpen in new tab

Scroll the page; the floating button will appear in the bottom-right.

Usage

Import the parts you need from the component's folder.

ts
import { ScrollToTop } from "@/components/ui/scroll-to-top";

API Reference

ScrollToTop

PropTypeDefaultDescription
thresholdnumber1000Scroll Y in px before the button appears.