Back to Top Button
Bouton rond qui entre avec un rebond une fois le visiteur bien descendu, et le ramène en haut en douceur, focus compris.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le bouton .btt-btn reste caché (transparent et visibility: hidden, donc hors du parcours au clavier) tant que le défilement n'a pas dépassé data-btt-threshold, 400 px par défaut. Au-delà, il reçoit la classe btt-visible et entre par une courbe élastique de 0,4 s ; il repart quand on remonte sous le seuil, sauf s'il a le focus clavier à ce moment-là.
Au clic (ou Entrée, Espace), la page remonte avec scrollTo({ top: 0, behavior: 'smooth' }), puis le focus est posé en haut : sur la page entière par défaut, sur l'élément visé par data-btt-focus si vous le précisez (un titre, un champ de recherche). L'élément reçoit un tabindex="-1" provisoire s'il n'est pas focalisable, retiré dès qu'il perd le focus. La touche Tab suivante part donc du haut, pas du bas de la page.
Sans réglage, le bouton est fixé en bas à droite de la fenêtre (24 px des bords, --btt-right et --btt-bottom). Pour un bloc qui défile seul (panneau, fenêtre de commentaires), donnez son sélecteur à data-btt-target et placez la racine en dernier enfant du bloc : elle devient position: sticky au bas du bloc, sans hauteur propre, et le bouton reste dans son coin. Chaque racine est indépendante.
Accessibilité
- Nom accessible : l'icône est masquée aux lecteurs d'écran (
aria-hidden) et le bouton portearia-label="Revenir en haut de la page". Adaptez-le pour un bloc (« Revenir au début du journal »). - Focus déplacé : après la remontée, le focus va en haut de la page ou du bloc, pour qu'un utilisateur au clavier ne reste pas coincé tout en bas. Un bouton caché n'est jamais atteignable par Tab.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la remontée est instantanée, le bouton apparaît en simple fondu de 0,2 s, sans rebond, et la flèche ne sautille plus au survol. - Focus visible : anneau clair de 2 px à
:focus-visible, en plus du soulèvement. Dans Safari sur Mac, Tab ne s'arrête sur les boutons que si l'option clavier du système l'autorise : c'est un réglage du Mac, pas un défaut du bouton. - Ce que le bouton ne remplace pas : un lien d'évitement ou un sommaire restent utiles en haut de page ; le bouton sert à revenir, pas à naviguer.
Compatibilité navigateur
JavaScript sans dépendance. Le défilement doux par scrollTo({ behavior: 'smooth' }) existe depuis Chrome 61, Firefox 36 et Safari 15.4 ; avant, la remontée est instantanée. focus({ preventScroll }) : Chrome 64, Firefox 68, Safari 15 ; Chrome Android l'ignore, sans effet gênant puisque la cible est déjà en haut. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : bouton de page et bouton de bloc dans la même page, code collé deux fois, seuil, clic, Entrée au clavier, toucher, 390 px, mouvement réduit, aucun nom ajouté sur window, 0 erreur.
Sans JavaScript, le bouton reste caché : la page fonctionne sans lui. Dans Safari 15 à 15.3, la remontée se fait d'un coup au lieu de glisser.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0736-root" data-btt-threshold="400">
<button class="btt-btn" type="button" aria-label="Revenir en haut de la page">
<svg aria-hidden="true">…</svg>
</button>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Seuil d'apparition (HTML — data-btt-threshold) |
400 (px) |
Distance défilée avant que le bouton n'entre. Sur un long article, 800 à 1200 px évitent qu'il apparaisse dès le premier écran. |
Bloc suivi (HTML — data-btt-target) |
absent : la page | Sélecteur CSS d'un bloc qui défile seul. Placez alors la racine en dernier enfant de ce bloc. |
Destination du focus (HTML — data-btt-focus) |
la page (ou le bloc suivi) | Sélecteur de l'élément qui reçoit le focus après la remontée : #recherche, h1… |
Position (CSS — --btt-right, --btt-bottom) |
24px et 24px |
Distance au bord droit et au bas de la fenêtre (ou du bloc). Remontez --btt-bottom si un bandeau cookies occupe le bas. |
Taille (CSS — width, height de .btt-btn) |
50px |
40 px pour un panneau, 32 px pour une petite fenêtre ; réduisez l'icône SVG dans les mêmes proportions. |
Couleurs (CSS — background de .btt-btn) |
dégradé #6366f1 → #8b5cf6 |
Couleur de votre charte ; gardez un contraste suffisant entre la flèche blanche et le fond. |
Recalcul (JS — root.fx0736.update()) |
— | Réévalue l'affichage du bouton tout de suite, par exemple après avoir changé le seuil par script. |
FAQ
div avec overflow: auto) au lieu de la page. Dans ce cas, donnez le sélecteur de ce conteneur à data-btt-target et placez la racine dedans, en dernier.data-btt-target. Chaque bouton ne regarde que son bloc. Un bouton de page peut cohabiter avec eux.
