Smooth Scrolling en JavaScript avec jQuery

Twitter
LinkedIn
Facebook
Mail
Smooth Scrolling avec Javascript et jQuery
Smooth Scrolling avec Javascript et jQuery
Smooth Scrolling avec Javascript et jQuery
Smooth Scrolling avec Javascript et jQuery

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.

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

Pour rappel, les liens hypertext vers des ancres ont la forme <a href="#mon-id">Lien vers l'ancre N°1</a> et pointent vers des éléments HTML identifiés par leurs ID, par exemple <h2 id="mon-id">Ma destination</h2>.

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 hypertext 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 sais si il arrive sur une partie qui précède ou devance le liens sur lequel il à cliqué, ainsi que la distance qui le sépare de ce dernier.

$(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é.

$(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 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
Passionné par le web et la programmation avec toujours plein de projets en tête
  Hey ! Ces articles aussi devraient vous plaire
  Discussion autour de l'article
avatar
1 Fils de commentaires
1 Réponses de fil
0 Abonnés
 
Commentaire avec le plus de réactions
Le plus populaire des commentaires
2 Auteurs du commentaire
Julien JACOBBen Auteurs de commentaires récents
  S’abonner  
plus récent plus ancien
Notifier de
Ben
Invité
Ben

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