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()
Poster un commentaire