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

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

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