JavaScript / jQuery : Tout sur le Smooth Scrolling

Partager sur email
Email
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur facebook
Facebook
Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Article Smooth Scrolling avec Javascript et jQuery Par @wpr0ck
Article Smooth Scrolling avec Javascript et jQuery Par @wpr0ck
Article Smooth Scrolling avec Javascript et jQuery Par @wpr0ck
Article Smooth Scrolling avec Javascript et jQuery Par @wpr0ck

Dans cet article, nous voyons comment utiliser le Smooth Scrolling, aussi appelé défilement doux ou fluide, en JavaScript et jQuery.

Ce procédé permet d’appliquer une animation au scroll et de ralentir le défilement vers un élément ciblé par une ancre au click sur un lien, par un sélecteur jQuery ou vers le haut de la page.

Cette animation pourtant simple apporte aux utilisateurs des sites qui l’utilisent un confort de lecture supplémentaire. En effet, le déplacement à l’intérieur du site par le biais de liens hypertexte internes se faisant de manière visible et compréhensible, l’utilisateur ne se retrouve plus « téléporté », mais est capable de se retrouver instinctivement. Il sait s’il arrive sur une partie qui précède ou devance le liens sur lequel il a cliqué, ainsi que la distance qui le sépare de ce dernier.

Dans les différents cas d’utilisations présentés ici, l’effet de Smooth Scrolling est paramétré pour s’effectuer sur 1500 millisecondes. Il est possible d’allonger ou de raccourcir ce temps d’exécution en modifiant cette valeur.

Défilement fluide sur les liens HTML vers les ancres avec jQuery

Pour rappel, les liens hypertextes vers des ancres ont la forme <a href="#my-id">Link to anchor</a> et pointent vers des éléments HTML identifiés par leurs ID, par exemple <h2 id="my-id">My destination</h2>. Une fois ajouté sur votre site, le code ci-dessous appliquera cet effet de Smooth Scroll automatiquement au click sur un lien pointant vers une ancre de la page en cours.

$(function() {
    /**
    * Smooth scrolling to page anchor on click
    **/
    $("a[href*='#']:not([href='#'])").click(function() {
        if (
            location.hostname == this.hostname
            && this.pathname.replace(/^\//,"") == location.pathname.replace(/^\//,"")
        ) {
            var anchor = $(this.hash);
            anchor = anchor.length ? anchor : $("[name=" + this.hash.slice(1) +"]");
            if ( anchor.length ) {
                $("html, body").animate( { scrollTop: anchor.offset().top }, 1500);
            }
        }
    });
});

Défilement fluide vers un élément HTML avec jQuery

Cette fonction, qui prend un sélecteur jQuery en paramètre, permet d’effectuer un déplacement fluide vers un élément HTML ciblé. Dans le code ci-dessous, je vous présente une fonction JavaScript scrollTo( target )qui prend en paramètre un élément jQuery et applique l’effet Smooth Scroll vers ce dernier. L’exemple d’utilisation de la fonction applique cet effet sur l’élément ayant l’ID my-id.

$(function() {
    /**
    * Smooth scrolling to a specific element 
    **/
    function scrollTo( target ) {
        if( target.length ) {
            $("html, body").stop().animate( { scrollTop: target.offset().top }, 1500);
        }
    }

    // exemple
    scrollTo( $("#mon-id") );
});

Défilement fluide vers le sommet de la page avec jQuery

Afin de faire le tours du sujet, je vous propose de finir sur un bout de code JavaScript / jQuery qui permet de faire un défilement fluide vers le sommet de la page.

$(function() {
    /**
    * Smooth scrolling to the top of page
    **/
    $("html, body").animate({scrollTop : 0}, 1500);
});
Julien MA Jacob
Développeur WordPress
Julien MA Jacob - Développeur WordPress
Passionné par le web et la programmation avec toujours plein de projets en tête
  Discussion autour de l'article
avatar
2 Fils de commentaires
1 Réponses de fil
0 Abonnés
 
Commentaire avec le plus de réactions
Le plus populaire des commentaires
3 Auteurs du commentaire
LoïcJulien JACOBBen Auteurs de commentaires récents
  S’abonner  
le plus récent le plus ancien le plus populaire
Notifier de
Ben
Invité
Ben

Super tuto!
Est-il possible de passer d’une ancre à l’autre simplement avec le scroll ?

Julien JACOB
Invité
Julien JACOB

Hello Ben et merci !

Pour ce qui est de passer d’une ancre à l’autre au scroll, je ne suis pas sûre de bien comprendre d’idée. Si le scroll provoque un défilement jusqu’a la prochaine ancre, comment fait-on pour faire défiler (et donc lire) le contenu entre 2 ancres ?

Mais puisqu’il est possible de lister les ancres avec leurs positions, de connaitre la position de l’utilisateur sur la page, d’intercepter les événements scroll bas et scroll haut et enfin de défiler vers une ancre, alors je suppose que cela est possible avec la bonne fonction JS :)

Loïc
Invité
Loïc

Bonjour!
Super!
Comment pourrais-je faire pour que, lorsque je clique sur un lien qui envoi sur une ancre d’une autre page, celle-ci se charge et scroll jusqu’à l’ancre ?

Merci d’avance! :)