Bouton scroll top haut de page
Article ajouté le 16/01/2019
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.
MAJ du 20/04/2020 : Intégration en JQuery seul
Grâce au bout de code ci-dessous, vous n'aurez plus besoin d'utiliser HTML ou CSS. Un simple copier/coller suffit et votre code sera optimisé.
$('<div></div>')
.attr('id','scrolltotop')
.hide()
.css({'z-index':'1000','position':'fixed','bottom':'25px','right':'35px','cursor':'pointer','width':'40px','height':'40px','background':'#111111'})
.appendTo('body')
.click(function(){
$('html,body').animate({scrollTop: 0}, 'slow');
});
$('<div></div>')
.css({'width':'6px','height':'6px','transform':'rotate(-135deg)','border':'solid #ffffff','border-width':'0 3px 3px 0','padding':'3px','margin-top':'16px','margin-left':'12px'})
.appendTo('#scrolltotop');
$(window).scroll(function(){
if($(window).scrollTop()<500){
$('#scrolltotop').fadeOut();
}else{
$('#scrolltotop').fadeIn();
}
});Ancienne version
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();
}
});7 commentaires
@Uri 2019-01-25 22:07:26
Impec ! Simple et efficace.
Merci c'est tout juste ce que je cherchais...
@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 ;)
@Marion 2020-01-19 22:11:09
Bonjour, cela me semble bien mais vous est il possible de me dire ou est ce que l'on met ces codes ? on créé un fichier ? mais ou ?
merci
bien cordialement
@p3x 2020-01-19 23:27:16
Bonjour Marion,
Le code HTML du bouton peut se placer où bon te semble dans ton document HTML. Pour ma part, je le place juste après la balise <body>.
Pour le code CSS, tu dois le mettre entre les balises <head></head> de ton document HTML en prenant soin de l'entourer par des balises <style type="text/css"> et </style>.
Enfin, pour le code JQuery tu auras besoin d'appeler le framework en plaçant <script src="//code.jquery.com/jquery-3.4.1.min.js"></script> en fin de document HTML juste avant la balise </body>.
Puis juste en dessous tu pourras ensuite copier/coller le code JQuery du bouton entre des balises <script></script> avant la balise </body>.
@JUM 2020-04-20 19:13:54
Merci pour le code c'est parfait ;).
@p3x 2020-04-20 19:40:46
Merci beaucoup JUM, je viens de mettre à jour le code.
Plus besoin de CSS ou de HTML maintenant ;-)
@Gilles 2020-10-21 16:28:44
Bonjour, Merci pour le code c'est au poil ! ! !
je l'ai légèrement modifié afin d'avoir uniquement la flèche de la couleur du menu fixe de mes pages:
$('<div></div>')
.attr('id','scrolltotop')
.hide()
.css({'z-index':'1000','position':'fixed','bottom':'25px','right':'35px','cursor':'pointer','width':'40px','height':'40px'})
.appendTo('body')
.click(function(){
$('html,body').animate({scrollTop: 0}, 'slow');
});
$('<div title="Haut de page"></div>')
.css({'width':'6px','height':'6px','transform':'rotate(-135deg)','border':'solid #0088cc','border-width':'0 5px 5px 0','padding':'6px','margin-top':'16px','margin-left':'13px'})
.appendTo('#scrolltotop');
$(window).scroll(function(){
if($(window).scrollTop()<500){
$('#scrolltotop').fadeOut();
}else{
$('#scrolltotop').fadeIn();
}
});