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

Posté par PUShAUNE le 11 mai 2022

0 commentaires :(

Vous voulez ajouter un bouton Back to top sur votre site ? C’est bien, mais c’est un peu bête de l’avoir quand on se trouve déjà en haut de page. Je vais ici vous apprendre comment le faire apparaître uniquement quand l’utilisateur scroll vers le haut.

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

Tu kiffes ? Alors partage avec tes potes !

Sois pas timide, lâche tes com’ !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.