Comment ajouter un bouton "Back to top" dans Webflow ?
Apprenez à ajouter un bouton "Back to top" qui apparaît au scroll dans Webflow avec un script JavaScript léger.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un bouton "Back to top" qui apparaît au scroll dans Webflow.
Exemple
Scrollez dans la zone pour voir apparaître le bouton
La barre de progression de lecture est un indicateur visuel qui montre à l'utilisateur sa progression dans la lecture d'un article.
Pour l'implémenter dans Webflow, vous avez besoin d'un Div fixe en haut de la page et d'un script JavaScript qui écoute l'événement scroll.
Le calcul est simple : on divise la position de scroll actuelle par la hauteur totale scrollable du document.
Ce composant est particulièrement utile sur les articles longs de blog ou de documentation.
Combinez-le avec un système d'ancres pour permettre à l'utilisateur de naviguer directement vers les sections.
Le bouton apparaît après 80px de défilement dans cette démo et remonte en douceur au clic.
| Propriété | Valeur recommandée |
|---|---|
| Position | Fixed |
| Bottom | 24px |
| Right | 24px |
| Display par défaut | None (caché) |
| Z-index | 999 |
1. Créez le bouton dans Webflow
Ajoutez un élément Link Block ou Div dans votre page. Attribuez-lui la classe back-to-top. Réglez sa position sur Fixed, bottom: 24px, right: 24px. Mettez-le en display: none par défaut. Ajoutez une icône flèche ou le texte de votre choix à l'intérieur.
2. Ajoutez le lien vers le haut de page
Si vous utilisez un Link Block, définissez le lien vers # ou vers l'ID de votre section hero.
3. Ajoutez ce script dans le <body>
const btn = document.querySelector('.back-to-top');
window.addEventListener('scroll', function() {
btn.style.display = window.scrollY > 300 ? 'flex' : 'none';
});
btn.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});4. Publiez et testez
Le bouton apparaît après 300px de défilement et remonte en douceur au clic. Ajustez la valeur 300 selon la longueur de vos pages.
Conclusion
Un bouton back to top améliore l'expérience sur les pages longues. Cas d'usage :
- Pages blog avec articles longs
- Landing pages avec beaucoup de sections
- Pages FAQ avec nombreuses entrées
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
