Retour en haut

العودة إلى الأعلىBack to top

Stablesrc/dsm/components/back-to-top.tsx

Un bouton flottant qui ramène en douceur vers le haut d'une page longue. Il n'apparaît qu'après un défilement suffisant et reste accessible au clavier même lorsqu'il est masqué à l'écran.

Import

import { BackToTop } from "@/dsm/components/back-to-top";

Exemples

Bouton visible

Seuil ramené à 0 pour la démonstration : faites défiler cette page de documentation pour le voir apparaître naturellement en usage réel.

LTR

Aperçu contenu dans un cadre pour ne pas recouvrir le reste de la page — en usage réel, le bouton est fixé au coin de la fenêtre.

Usage

Quand l'utiliser

Ajoutez-le une seule fois par page, sur une page dont le contenu dépasse largement la hauteur de l'écran (article long, texte réglementaire).
Placez un élément avec `id="top"` en haut de page (par défaut) pour définir la cible du retour.

Quand ne pas l'utiliser

N'en ajoutez pas sur une page courte : le seuil de déclenchement (600 px par défaut) ne sera jamais atteint et le bouton n'a pas lieu d'être.

Accessibilité & langues

Accessibilité

Le bouton reste dans le DOM en permanence ; il est retiré de l'ordre de tabulation (`tabIndex=-1`) et masqué aux technologies d'assistance (`aria-hidden`) tant qu'il n'est pas visible.
Le défilement respecte `prefers-reduced-motion`, géré globalement par le système de design.

RTL & multilingue

Le bouton est ancré en `end` (à gauche en arabe, à droite en français) grâce à une propriété logique — jamais `right`.

Propriétés

BackToTop

Propriété	Type	Défaut	Description
threshold	number	600	Distance de défilement, en pixels, avant l'apparition du bouton.
targetId	string	top	Identifiant de l'élément vers lequel défiler.
className	string	—	Classes Tailwind supplémentaires.

Composants liés

Sommaire