Back to Top Component — Astro
Fixed button that appears on scroll and scrolls the page back to top.
Back to Top Component
A fixed button that appears after the user scrolls down and scrolls the page back to the top on click. Uses smooth scrolling and is keyboard accessible. Optional threshold (pixels) and label props.
Add this component
The command below includes <strong>Back to Top</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npm pnpm yarn bun
npm 
pnpm 
yarn 
bun Live Example
Scroll down this page to see the button appear in the bottom-right corner, then click it to scroll back to top.
Props
threshold(number, optional) — Pixels scrolled before the button appears (default: 400)label(string, optional) — Accessible label for the button (default: "Back to top")class(string, optional) — Additional CSS classes on the wrapper
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React