Bouton Retour en Haut
Scrollez vers le bas pour voir apparaître le bouton de retour en haut.
Section 1 — Introduction
Ce composant Seed I.T affiche un bouton flottant permettant de remonter rapidement en haut de la page. Le bouton apparaît progressivement après avoir scrollé d'environ 300 pixels.
L'animation est fluide grâce à scroll-behavior: smooth et les transitions CSS.
Le bouton est entièrement accessible au clavier avec gestion du focus.
Section 2 — Design Seed I.T
Le bouton utilise le gradient bleu signature Seed I.T et les variables CSS standardisées. L'icône de flèche est un SVG inline optimisé pour la performance.
Les états hover et focus sont visuellement distincts, avec une légère rotation et un agrandissement de l'ombre au survol.
Section 3 — Accessibilité
Le bouton est accessible via la touche Tab et activable avec Enter ou Espace.
Un aria-label descriptif permet aux lecteurs d'écran de comprendre sa fonction.
Le composant respecte les normes WCAG AA avec un contraste suffisant et une zone de clic confortable (50x50px minimum).
Section 4 — Responsive
Le bouton se positionne correctement sur mobile et desktop. Sur mobile, il reste accessible sans masquer le contenu important.
La position fixe en bas à droite assure une visibilité constante sans nuire à l'expérience utilisateur.
Section 5 — Performance
Le composant utilise un écouteur d'événement scroll avec throttling
implicite via requestAnimationFrame pour optimiser les performances.
Aucune bibliothèque externe n'est nécessaire. Le code est léger et fonctionne dans tous les navigateurs modernes.
Section 6 — Intégration
Ce composant peut être intégré facilement dans n'importe quelle page.
Il utilise le préfixe .seedit- pour éviter les conflits CSS.
Le JavaScript est entièrement encapsulé dans une IIFE, aucune pollution du scope global.
Section 7 — Maintenance
Score de maintenance M=10. Le code est simple, stable et ne nécessite pas de mise à jour fréquente.
La structure CSS utilise les custom properties Seed I.T, facilitant les ajustements de style globaux.
Section 8 — Fin de la démonstration
Vous êtes arrivé en bas de la page. Cliquez sur le bouton flottant pour remonter instantanément en haut !
Vous pouvez également tester l'accessibilité clavier en naviguant avec Tab et en activant le bouton avec Enter ou Espace.