Back To Top
Fixed button that appears on scroll and smoothly scrolls the page back to top
Same BEM classes and behavior as Astro, Svelte, and Vue.
Add this component
Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.
Choose your package manager â click a tab to select, then copy the command.
Live examples
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 ---
import BackToTop from '../components/astro/BackToTop.astro';
---
<BackToTop threshold={400} label="Back to top" client:load />
<!-- Rizzo CSS. Script runs on DOMContentLoaded. Full snippet: /docs/vanilla/components/back-to-top -->
<button type="button" class="back-to-top" data-back-to-top aria-label="Back to top">â</button>
<script>
import { BackToTop } from '$lib/rizzo';
</script>
<BackToTop threshold={400} label="Back to top" />
<script setup>
import BackToTop from '@/components/rizzo/BackToTop.vue';
</script>
<template>
<BackToTop :threshold="400" label="Back to top" />
</template>
import { BackToTop } from './components/react';
<BackToTop threshold={400} label="Back to top" />
Other frameworks: Astro ¡ Vanilla ¡ Svelte ¡ Vue