Faciliter la navigation sur un site avec un bouton de retour en haut de page

Créer un bouton de retour en haut de page

Lorsque les pages de votre site sont longues, il peut être contraignant pour un internaute, une fois qu’il se trouve en bas de page, de remonter tout en haut du contenu (et c’est encore pire lorsqu’il ouvre votre site depuis un mobile). Pour faciliter la navigation à travers ces pages, vous pouvez mettre en place une fonctionnalité simple qui permettra d’afficher un bouton de retour en haut de page. 

Création du bouton

On commence par ajouter notre bouton à l’emplacement souhaité. On peut par exemple choisir de le placer en bas du contenu, de le fixer à en endroit sur la page pour qu’il soit utilisé à tout moment, ou de le mettre à cheval entre le contenu et le pied-de-page par exemple. Voici un exemple de bouton :

Code HTML :

        <button id="scroll-top-btn">Mon bouton</button>
    

Code CSS :

        #scroll-top-btn {
    font-family: "Arial", sans-serif;
    font-weight: normal;
    background-color: #B0E0E6;
    font-size: 1rem;
    border: 2px solid #BEE0E4;
    border-radius: 0.5rem;
    color: #ffffff;
    padding: 0.5rem 1rem;
    -webkit-transition: background-color 0.6s ease-in-out;
    -moz-transition: background-color 0.6s ease-in-out;
    -ms-transition: background-color 0.6s ease-in-out;
    -o-transition: background-color 0.6s ease-in-out;
    transition: background-color 0.6s ease-in-out;
}
    

        #scroll-top-btn:hover,
#scroll-top-btn:focus {
    background-color: #BEE0E4;
    color: #ffffff;
    outline: 0;
}
    

Ajout de la fonction Javascript permettant de remonter en haut de page

Maintenant que l’on a notre bouton, on va pouvoir construire la fonction Javascript permettant, au clic sur celui-ci, de remonter en haut de notre page. Pour cela, on va mettre en place un Event Listener qui s’occupera de déclencher notre fonction lors du clic.

        // On définit une variable pour appeler notre bouton
var scrollTopBtn = document.getElementById("scroll-top-btn");
// On définit une variable pour appeler notre page
var rootElement = document.documentElement;
    

        // On crée la fonction permettant de remonter en haut de page
function scrollTop() {
    // Scroll to top logic
    rootElement.scrollTo({
        top: 0,
        behavior: "smooth"
    })
}
    

        // On ajoute notre Event Listener
scrollToTopBtn.addEventListener("click", scrollTop);
    

Et voilà, vous avez maintenant toutes les clés en main pour ajouter ce type de fonctionnalité sur votre propre site web.