Composant · Navigation
BackToTop
DocumentéLe composant BackToTop affiche un bouton d’accès rapide vers le
haut de page après un défilement défini, utile sur des écrans longs.
Présentation
Le bouton est positionné en bas à droite et caché tant que la position de défilement est inférieure au seuil configuré.
BackToTop
Voir le code (Svelte)
<BackToTop />Fonctionnement
L’exemple suivant montre le composant avec un seuil personnalisé (100 px).
BackToTop seuil 100
Voir le code (Svelte)
<BackToTop threshold={100} label="Monter" />Sur la page réelle, faites défiler pour le voir apparaître puis retournez en
haut en un clic. Le composant est position: fixed : son
apparition dépend du défilement réel, la démo ci-dessus le montre rendu en
continu.
API
| Prop | Type | Défaut | Effet |
|---|---|---|---|
label | string | "Retour en haut" | Libellé rendu dans le bouton |
targetId | string | "top" | Identifiant cible visé en ancres (#top par défaut) |
threshold | number | 240 | Nombre de px vertical avant affichage |
autoHide | boolean | true | Masque automatiquement avant le seuil |
smooth | boolean | true | Active le défilement doux |
Accessibilité
- Le label est porté par
aria-label. - Le focus clavier reste possible via
Tabquand le bouton est visible. - La zone cible peut être une ancre propre (
targetId).
Notes
- En mode non-animé, utilisez
smooth=false. - Placez une ancre id
topdans votre layout pour cibler un point précis. - Intégrez une marge de placement selon votre header fixe.
Tokens utilisés
--st-component-control-hoverBorder--st-component-control-hoverBackground