Bouton scroll top haut de page

Article ajouté le 16/01/2019

Bouton scroll top haut de page

Je vous présente aujourd'hui un petit script qui vous permettra d'améliorer l'ergonomie et la navigation de votre site Web. Il s'agit simplement d'un petit bouton qui aparaît automatiquement sur vos pages. Ce bouton permet aux visiteurs de revenir en haut de page.

L'avantage de mon script c'est qu'il est très légé et ne demande qu'un peu de jQuery, CSS et HTML. Vous n'aurez pas besoin d'image pour la flèche elle est est créée en code.

Le code HTML du bouton :

<div id="scrolltotop"><div></div></div>

Le code CSS du bouton :

#scrolltotop{display:none;z-index:1000;position:fixed;bottom:25px;right:35px;cursor:pointer;width:40px;height:40px;background:#111111;}
	#scrolltotop div{width:6px;height:6px;transform:rotate(-135deg);border:solid #ffffff;border-width:0 3px 3px 0;padding:3px;margin-top:16px;margin-left:12px;}

Le jQuery qui vous permettra d'effectuer les interactions :

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

2 commentaires

U

@Uri 2019-01-25 22:07:26

Impec ! Simple et efficace.
Merci c'est tout juste ce que je cherchais...

Répondre

p

@p3x 2019-01-26 04:34:46

Comme quoi, pas besoin de grand chose pour que ça face plaisir !
Ca me fait plaisir de te faire plaisir ;)

Répondre

Poster un commentaire

Commentaire

Nom

Adresse e-mail

Votre adresse e-mail n'est pas publiée lorsque vous ajoutez un commentaire.
Tous les champs sont obligatoires pour soumettre votre commentaire.