Le principe consite lors du scroll de la page, de faire apparaître un bouton pour remonter en haut de la page via jQuery.
Le code jQuery consiste dans un premier temps à mettre en place une condition d'affichage ou non pour le bouton lors du scroll en se servant des fonctions .scroll()
et .scrollTop()
.
Puis, dans un second temps, utiliser la fonction .animate()
pour instaurer un effet de "smooth scroll" (défilement fluide) lors du clic sur le bouton.
Code HTML
<a href="#" class="go_top">Remonter</a>
Le mot "Remonter" s'affichera si le CSS est désactivé sur le navigateur.
Code CSS
.go_top {
background: url("votre_image.png") no-repeat;
display: none;
position: fixed;
width: 128px; /* A régler selon votre image */
height: 128px; /* A régler selon votre image */
bottom: 0; /* A régler selon votre image */
right: 0; /* A régler selon votre image */
text-indent: -9999px;
}
Code jQuery
$(document).ready(function() {
// Condition d'affichage du bouton
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".go_top").fadeIn();
} else {
$(".go_top").fadeOut();
}
});
// Evenement au clic
$(".go_top").click(function() {
$("html, body").animate({ scrollTop: 0 }, 800);
return false;
});
});
La valeur 100
à la ligne $(this).scrollTop() > 100
correspond au nombre de pixels scrollés.
Sources
.scroll()
: http://api.jquery.com/scroll ;.scrollTop()
: http://api.jquery.com/scrollTop ;.animate()
: http://api.jquery.com/animate.