Ajouter un bouton "haut de page"

Vous souhaitez ajouter un bouton permettant de retourner en haut de la page ? On vous explique comment faire en 3 étapes !

1. Le JavaScript
2. Le HTML
3. Le CSS

1. Le JavaScript

Nous allons créer un fichier js/scrolltotop.js. La première instruction permet d'indiquer une fonction a appeler lors du défilement de la fenêtre.

Dans cette fonction, nous gérons l'affichage du bouton "haut de page". Celui-ci est masqué lorsqu'on se situe en haut de la fenêtre, et il est affiché lorsque le défilement est supérieur à 20px.

La seconde fonction est appelée lorsque l'utilisateur clique sur le bouton "haut de page", et permet de revenir en haut de la fenêtre.

// scrolltotop.js

// Execute a function when the window is being scrolled
window.onscroll = function () { scrollFunction() };

// When the user scrolls down 20px from the top of the document, show the button
function scrollFunction() {
  // Get the button
    var mybutton = document.getElementById("scrollToTopButton");

    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.opacity = 1;
        mybutton.style.visibility = "visible";
    } else {
        mybutton.style.opacity = 0;
        mybutton.style.visibility = "hidden";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

2. Le HTML

Dans le fichier index.html, nous n'avons plus qu'à ajouter le bouton et importer le fichier javascript que nous venons de créer.

<!-- index.html -->

<body>
  ...
  <!-- Scroll To Top -->
    <button onclick="topFunction()" id="scrollToTopButton" title="Haut de page"><i class="fas fa-chevron-up"></i></button>
    <script src="/js/scrolltotop.js" type="text/javascript"></script>
</body>

Ici, nous utilisons l'icone chevron-up de Font Awesome, mais vous pouvez aussi utiliser votre propre image.

3. Le CSS

Pour finir, on va enjoliver tout ça avec un peu de CSS !

Tout d'abord, on rajoute cette propriété afin d'avoir un effet fluide lors du défilement vers le haut de page.

/* style.css */

html {
  scroll-behavior: smooth;
}

Et voici un peu de CSS pour avoir un bouton ayant l'aspect de celui du blog. Il ne vous reste plus qu'à customiser tout ça avec vos couleurs !

/* style.css */

#scrollToTopButton {
  display: block;
  z-index: 99;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 20px;
  right: 30px;
  border: none;
  border-radius: 4px;
  outline: none;
  width: 50px;
  height: 50px;
  padding: 8px;
  background-color: #333333bf;
}
#scrollToTopButton i {
  color: white;
}
#scrollToTopButton:hover,
#scrollToTopButton:focus,
#scrollToTopButton:focus-within {
  cursor: pointer;
  background-color: #0078b4;
}

Partager sur