Hi !

Aujourd’hui, je vais vous présenter un script JQuery utilisé par énormément de sites web : le scroll to top. Qu’est-ce que c’est ? C’est une flèche que vous allez faire apparaître lorsque l’utilisateur fera défiler sa page, ainsi si il veut remonter en haut de page, il clique dessus et peut ainsi accéder rapidement au menu du site.

Certains d’entre vous me diront mais pourquoi utilisé JQuery alors qu’une balise ancre réalise ceci. Par exemple, on pourrait faire :

<a href="#menu">Les dernières nouvelles</a>

Ainsi, si une div avec l’id menu existe, on sera renvoyer vers elle. L’intérêt du script est donc discutable toutefois il permet de donner une meilleur expérience utilisateur. Notamment car JQuery va nous permettre d’ajouter des effets au clique sur cette ancre.

Structure Html

C’est parti, comme d’habitude le html d’abord. On définit une div et on y ajoute une image (pour ma part mon image vient du site iconmonstr).

<div id='scroll_to_top' class='opacity'>
    <img src="img/scrolltop.png" alt="Retourner en haut">
</div>

Le Css de notre scroll to top

Passons au css, on définit notre div en position fixed, c’est à dire :

Un élément positionné en fixed est positionné par rapport a la fenêtre du navigateur, ce qui signifie qu’il reste toujours à la même place même si la page défile.

On place donc cette div en bas à droite de la page à 50px du bas et de la droite. Enfin on définit une taille fixe pour notre div.

#scroll_to_top {
  position: fixed;
  width: 35px;
  height: 35px;
  bottom: 50px;
  right: 50px;
  display: none;
}

Le script jQuery de notre scroll to top

Intéressons nous maintenant à la dernière partie la plus intéressante le javascript ! On vérifie deux cas :

• Si l’utilisateur scroll et que la hauteur du scroll est supérieur à 500 pxiels, on affiche l’ancre avec un effet le fadeIn(), sinon on masque l’ancre.
• Si il clique, sur cet ancre, on le renvoi vers le haut de la page avec une animation, dont on précise la durée (on peut préciser des secondes ou des effets, slow, fast…).

$(document).ready(function() {
    function scroll_to_top(div) {
        $(div).click(function() {
            $('html,body').animate({scrollTop: 0}, 'slow');
        });
        $(window).scroll(function(){
            if($(window).scrollTop()<500){
                $(div).fadeOut();
            } else{
                $(div).fadeIn();
            }
        });
    }
    scroll_to_top("#scroll_to_top");
});

Voila, déjà finit ! Si vous voulez un aperçu du résultat et bien le site sur lequel vous êtes utilise cette fonction. Enjoy guys !