Ce que l’on aime tous, c’est la fluidité. On apprécie regarder un film en 60 fps ou jouer à un jeu en 144 images par seconde. Eh bien, sur un site internet, c’est la même chose ! On aime que la navigation soit fluide. Cela ne concerne pas que le temps de chargement d’une page, mais également le défilement à l’intérieur de cette même page. Quand vous cliquez sur une ancre qui vous emmène plus bas ou plus haut dans la page. Par défaut, le déplacement est instantanée. Pourtant, il est possible de transformer cela en un déplacement fluide, on appelle cela le « défilement progressif » ou « smooth scroll ». C’est exactement ce que nous allons voir à travers ce tutoriel.
Dans un premier temps nous verrons un exemple sans le déplacement progressif, puis nous verrons ce même exemple avec cette fois-ci le déplacement progressif. Et nous verrons comment mettre en place le fameux bouton retour en haut de la page.
Dans ce tutoriel, nous estimons que vous savez mettre en place jQuery sur votre site internet et que cela est déjà fait. Si vous rencontrez des difficultés, n’hésitez pas à faire appel à un développeur jQuery pour vous aider !
Vous pouvez également vous référer à notre tutoriel sur les ancres de lien.
Sommaire :
Avant toute chose mettons en place notre contexte. Pour réussir à faire un défilement progressif, il nous faut une page suffisamment grande pour avoir besoin de faire un défilement. Pourquoi, pas tout simplement, créer une page avec quelques blocs très haut, histoire d’avoir un très large dépassement de la ligne de flottaison.
Pour construire cela, nous allons jouer avec un petit peu de HTML et un petit peu de CSS.
<main>
<section id="s1">...</section>
<section id="s2">...</section>
<section id="s3">...</section>
<section id="s4">...</section>
</main>#s1 {
height: 250px;
}
#s2 {
height: 650px;
}
#s3 {
height: 400px;
}
#s4 {
height: 200px;
}Et, nous allons ajouter un menu latéral gauche, qui doit rester fixé à l’écran. Tous les liens de ce menu seront donc des ancres vers les différents blocs la page. Dans l’exemple qui va suivre, la façon dont est positionné le menu ce n’est pas très conventionnel, c’est surtout pour l’exemple.
Voici donc l’exemple complet de notre page internet.
Maintenant que nous avons notre tâche avec les ancres déjà en place, nous allons pouvoir ajouter le défilement progressif. Pour cela, nous allons utiliser jQuery. Il est possible de le faire avec JavaScript de base, mais cela demande de recoder l’animation manuellement, ce qui est assez long.
Tout d’abord, il nous faudra initialiser JavaScript, avec la méthode ready, qui s’écrit, rappelons, de plusieurs façons.
$(funcion() { ... })Maintenant, dans la logique, l’étape suivante, sera d’effectuer le défilement lorsqu’on clique sur le lien du menu. Nous allons cibler les liens avec [[aside a]] et donc ajouter un événement de type [[click]] sur les liens du menu.
$('aside a').on('click', function(e) { ... }Tout le reste va se passer à l’intérieur de cet événement.
Nous allons commencer pas annuler l’action de l’ancre avec un preventDefault.
e.preventDefault();Ensuite, l’objectif sera d’enregistrer l’élément ciblé à travers le lien qui se situe dans l’attribut href de ce dernier.
let target = $(this).attr('href');Maintenant, parlons de la méthode pour effectuer le défilement progressif. La position sur la page a une valeur. Cette valeur se retrouve dans les éléments html et body et est quantifiables avec la donnée scrollTop. Donc, pour défiler vers la cible, il nous suffit de modifier la position sur la page pour lui indiquer la position de l’élément cible dans la page. Le tout, avec une petite animation pour avoir un défile progressif.
$('html, body').animate( {
scrollTop: $(target).offset().top
}, 800);Voici le même exemple que tout à l’heure, mais avec le défilement progressif en place dans le JavaScript.
Maintenant, la même page, nous allons rajouter un bouton « retour vers le haut ». Il s’agit généralement d’un bouton placé tout en bas à droite de l’écran, avec une flèche pointant vers le haut. Au clic sur celle-ci, nous sommes progressivement redirigés vers l’au-delà page.
Classement de bouton à la fin du HTML.
<div id="back-to-top">⇡</div>Fixons-le en bas à droite de l’écran.
#back-to-top {
display: inline-block;
position: fixed;
bottom: 15px;
right: 40px;
width: 60px;
height: 60px;
background: #346abf;
color: white;
text-align: center;
line-height: 60px;
font-size: 32px;
border-radius: 50%;
cursor: pointer;
}Tout comme on a fait avec les liens du menu, rajouter un événement click sur ce bouton. À l’intérieur de cet événement, une animation qui remonte en haut de la page, donc modifier la valeur de scrollTop pour 0.
$('#back-to-top').on('click', function(e) {
e.preventDefault();
$('html, body').animate( {
scrollTop: 0
}, 800);
})En sachant que ce bouton est ajouté à la suite de l’exemple précédent, nous avons du code redondant. Ce que l’on peut faire, c’est place et l’animation dans une fonction. Nous allons créer une fonction scrollTo, qui va avoir pour paramètres la cible target et la durée de l’animation duration par défaut à 800ms. Petit cas particulier, nous allons rajouter une condition pour la valeur scrollTop. Si la cible est un élément, on va récupérer la hauteur de cet élément, sinon on va la considérer comme une valeur numérique.
const scrollTo = function( target, duration = 800 ) {
$('html, body').animate( {
scrollTop: isNaN(target) ? $(target).offset().top : target
}, duration);
}Ainsi, dans nos deux événements, pouvoir utiliser cette fonction.
$('aside a').on('click', function(e) {
e.preventDefault();
scrollTo( $(this).attr('href') )
})
$('#back-to-top').on('click', function(e) {
e.preventDefault();
scrollTo( 0 )
})Voici un exemple complet et final.
Vous savez à présent installer un défilement progressif, ou « smooth scroll », sur votre page internet à l’aide de Javascript et particulièrement avec jQuery.
Si certaines parties de ce tutoriel fermenter un quelconque problème, vous pouvez gratuitement déposer une annonce sur Codeur.com pour trouver un développeur jQuery disponible pour réaliser votre projet.