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.

bon à savoir

Pour une animation d'apparition plus douce, remplacez display: none/flex par une transition CSS opacity. Ajoutez dans vos styles : .back-to-top { opacity: 0; transition: opacity 0.3s; pointer-events: none; } .back-to-top.visible { opacity: 1; pointer-events: auto; } et adaptez le script pour toggler la classe visible.

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

Comment ajouter un bouton "Back to top" dans Webflow ?

Exemple

1. Créez le bouton dans Webflow

2. Ajoutez le lien vers le haut de page

3. Ajoutez ce script dans le <body>

4. Publiez et testez

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires