[JS] Ajouter un bouton « Remonter » avec jQuery

Pour ajouter un bouton « Remonter » ou « Retour en haut de page », il suffit d’ajouter un div transparent en bas de page qui permet de remonter tout simplement en haut de page. Bien entendu on va ajouter des petits effets jQuery histoire de rendre cela un petit peu plus agréable pour les yeux…

Le code jQuery

Il faut commencer par enregistrer tous les évènements de scroll sur la page et ajouter une div avec un lien a qui permette de retourner en haut de page :

$(window).scroll(function() {
	if($(window).scrollTop() == 0){
		$('#scrollToTop').fadeOut("fast");
	} else {
		if($('#scrollToTop').length == 0){
			$('body').append('<div id="scrollToTop">'+'<a href="#">Retour en haut</a>'+'</div>');
		}
		$('#scrollToTop').fadeIn("fast");
	}
});

Ce code est tout simple, lorsque la position du scroll est à 0, il cache le div de retour en haut de page et lorsque la position n’est pas égale à 0, il vérifie si la div #scrollToTop existe, si ce n’est pas le cas, il la créée puis l’affiche.

Ainsi lorsque vous « scrollerez » sur votre page, vous devriez voir apparaitre tout en bas une div avec un lien « Retour en haut ». Lorsque vous cliquerez sur ce lien, vous serez automatiquement envoyé en haut de la page. On va ajouter encore un peu de code jQuery pour que le scroll qui remonte en haut de la page soit « joli » :

$('#scrollToTop a').live('click', function(event){
	event.preventDefault();
	$('html,body').animate({scrollTop: 0}, 'slow');
});

Ce code va tout simplement « animer » votre scroll jusqu’en haut de la page, on ne peut plus simple…

Le code CSS

Bon maintenant il faut ajouter un peu de magie CSS pour que le bouton apparaisse toujours en bas à droite de la page web. On ajoute donc le code suivant dans la feuille de style :

/** ScrollToTop **/
#scrollToTop a{
	position: fixed;
	right: 20px;
	bottom: 10px;
	background-color: rgb(255,255,255); /** rgba fallback**/
	background-color: rgba(255,255,255, 0.7);
	padding: 7px 10px;
	border: 1px solid #000;
}<a href="http://j.pirio.free.fr/scroll-to-top.html" rel="nofollow"><strong>Page de test</strong></a>
#scrollToTop a:hover{
	box-shadow: 0px 0px 5px #222;
	-moz-box-shadow: 0px 0px 5px #222;
	-webkit-box-shadow: 0px 0px 5px #222;
	text-decoration: none !important;
}

Et voila, c’est aussi simple que ça, si vous avez bien suivi les instructions vous devriez vous le bouton « Retour en haut » qui apparaît en bas à droite de votre page des que vous utilisez la molette de votre souris vers le bas. Et lorsque vous remonterez le bouton disparaîtra comme par magie.

Conclusion

Ce code à été testé sur les navigateurs récents (Safari, Chrome, Firefox) ainsi que sur IE et je n’ai pas noté de problème particulier (sauf IE, voir en dessous).

Problèmes:

• Pour l’instant ce n’est pas compatible avec Safari iPhone à cause du position:fixed;.
• Avec Opéra, l’effet de scrollToTop ne fonctionne pas. Apparemment c’est un problème connu.
• Avec IE8, les effets de fadeIn() et fadeOut() ne fonctionnent pas, j’ai l’impression qu’ils sont remplacés par show() et hide(). C’est peut être un soucis lié à la manière dont je positionne ma div #scrollToTop…