Bouton Scroll en Haut

Le bouton Scroll en Haut est un élément d'interface utilisateur généralement placé en bas à droite de la page web qui permet à l'utilisateur de retourner en haut de la page rapidement sans avoir à faire défiler manuellement la page.

Fonctionnement

Le bouton Scroll en Haut est généralement intégré dans la page web à l'aide de JavaScript et CSS. La fonction de défilement en haut est déclenchée lorsque l'utilisateur clique sur le bouton et la page est animée pour remonter en haut de la page.

Code HTML

Le code HTML suivant montre comment ajouter le bouton Scroll en Haut à une page web :

<a href="#" class="scroll-to-top">
   <i class="fa fa-chevron-up"></i>
</a>

Le href="#" est utilisé pour que le bouton ne renvoie pas à une autre page. La classe scroll-to-top permettra de styliser le bouton à l'aide de CSS.

Code CSS

Une mise en forme typique pour le bouton Scroll en Haut peut être réalisée avec le CSS suivant :

.scroll-to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   display: none;
   width: 50px;
   height: 50px;
   background: #007bff;
   color: #fff;
   transition: background-color 0.5s ease-in-out;
   border-radius: 50%;
   text-align: center;
   line-height: 50px;
   z-index: 9999;
}

.scroll-to-top:hover {
   background-color: #011f4b;
}

.scroll-to-top i {
   font-size: 24px;
}

Le CSS définit les propriétés de positionnement, de style et de transition pour le bouton, ainsi que les styles pour l'icône.

Code JavaScript

Le bouton Scroll en Haut peut être programmé avec JavaScript pour déclencher la fonction de remontée sur la page.

$(window).scroll(function(){
   if ($(this).scrollTop() > 100) {
      $('.scroll-to-top').fadeIn();
   } else {
      $('.scroll-to-top').fadeOut();
   }
});

$('.scroll-to-top').click(function(){
   $('html, body').animate({scrollTop : 0},800);
   return false;
});

Le code JavaScript permet de déclencher l'affichage et la disparition du bouton en fonction de la position de défilement de l'utilisateur. Le clic sur le bouton déclenche la fonction de remontée sur la page avec une animation fluide.

Conclusion

Le bouton Scroll en Haut est une fonctionnalité utile pour les pages web qui contiennent beaucoup de contenu. En ajoutant cette fonctionnalité à votre site, vous pouvez offrir à vos utilisateurs une expérience de navigation plus agréable et plus fluide.