Code JQuery retour en haut du site avec scroll défilant
Accueil > Technique > Le reste > Le reste Débutant > Code JQuery retour en haut du site avec scroll défilant
JQuery Retour en haut de page
Nous abordons ici un petit code JQuery intéressant pour les pages au contenu important. Plus vous défilez vers le bas et plus le retour vers le haut du site pour accéder notamment aux menus, devient fastidieux. Certes il existe les ancres HTML mais elles sont archaïques, peu ergonomiques et proposent un retour brutal. Ici le code JQuery propose l'affichage du bouton retour vers le haut dès lors que le scroll fait disparaître la tête du site. De plus le retour se fait en douceur avec un scroll réparti sur un délai que vous pouvez personnaliser. L'image ci-dessous illustre le résultat à obtenir :
- Vous devez tout d'abord commencer par effectuer dans le
<head>la déclaration de la librairie JQuery que vous allez utiliser :
...
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
</head>- Dans le body, vous devez ajouter l'ancre Html, comme suit :
...
<body>
<a href='#' class='retourHaut'></a>
...
Comme vous le remarquez, cette ancre est associée à une classe retourHaut que nous allons devoir créer. C'est par cette classe que le JQuery pilote l'ancre et son effet. Nous allons donc maintenant ajouter ce code nécessaire.
- Vous devez retourner dans le
<head>de votre page et ajouter le code qui suit sous la déclaration précédente de la librairie :
...
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.retourHaut').fadeIn();
}
else
{
$('.retourHaut').fadeOut();
}
});
$('.retourHaut').click(function(){
$('html, body').animate({scrollTop :0},800);
return false;
});
});
</script>
</head>
...
Dès lors que le scroll vers le bas dépasse les 100px ( if($(this).scrollTop() > 100) ) on propose l'affichage du bouton de retour vers le haut. Ce retour se fera en douceur, réparti sur 0,8 seconde, soit 800 millisecondes ( $('html, body').animate({scrollTop : 0},800); ).
- Vous devez enfin ajouter les styles dans votre feuille de style ou encore dans le head de votre page, comme suit :
.retourHaut{
width:100px;
height:100px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:80%;
right:8%;
display:none;
background: url('../votre_dossier/votre_image.png')no-repeat 0px 0px;
}
.retourHaut:hover{
text-decoration:none;
}
Vous n'avez plus qu'à tester et apprécier.
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales
