Un bouton back-to-top qui n’apparaît qu’au scroll up

Niveau : intermédiaire
Langage : Javascript

Pourquoi un bouton Back to top

Personnellement, je ne vois pas l’intérêt des bouton qui ramènent en haut de page. Avec les menus fixes, cette pratique a perdu de son intérêt mais j’ai encore des clients qui me demandent d’ajouter cette fonctionnalité à leur site.

Afin de ne pas trop perturber l’internaute avec un élément supplémentaire, j’ai fait le choix de masquer ce bouton par défaut et de ne le faire apparaître que lorsque l’internaute scroll vers le haut ; donc lorsqu’il peut en avoir besoin.

Nous allons commencer par créer une balise en html qui va renvoyer vers ma balise main#content qui est tout en haut de ma page :

<a href="#content" id="up-button">Retour en haut</a>

Je vais ensuite le masquer à l’aide du css, et créer une .class nommée show pour le révéler :

#up-button{
	display: none;
	/* éléments de style, vous pouvez mettre ce que vous voulez, ils ne sont là que pour l'exemple */
	position: fixed;
	bottom: 50px;
	left: 50px;
}
#up-button.show{
	display: block;
}

Je vais maintenant ajouter un script javascript pour détecter quand l’internaute scroll vers le haut, et ajouter la class show à mon bouton :

/* = Apparition du up button
----------------------------------------------- */
var iScrollPos = 0;
$(window).scroll(function () {
	var iCurScrollPos = $(this).scrollTop();
	if (iCurScrollPos > iScrollPos) {
		$('#up-button').removeClass('show');
	} else {
		$('#up-button').addClass('show');
	}
	iScrollPos = iCurScrollPos;
});

Enfin, j’ajoute un smooth scroll :

/* = Smooth scroll
----------------------------------------------- */
$('a[href*="#"]:not([href="#"])').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	    var target = $(this.hash);
	    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	    if (target.length) {
	      $('html, body').animate({
	        scrollTop: target.offset().top
	      }, 1000);
	      return false;
	    }
	}
});

À noter que vous n’êtes pas obligé de passer par du javascipt pour avoir un effet de smooth scroll. La propriété scroll-behavior: smooth; le fait très bien :)

See ya’ space integrator