Effet de smooth scroll avec jQuery

Cet article vous présente le code à utiliser afin d’ajouter un effet de smooth scroll aux ancres nommées d’une page web en utilisant jQuery.

Intégration de jQuery

Intégrez jQuery à votre page web dans l’en-tête de votre page web via un CDN ou une autre méthode de votre choix.

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

Code JS de l’effet smooth scroll

Ajoutez le code suivant dans un fichier javascript lié à votre page web ou directement via la balise <script> dans l’en-tête de votre page web.

$(document).ready(function() {
    $('a[href^="#"]').click(function(){
        var id = $(this).attr("href");
        if (id === '#') {
            return;
        }
        $('html, body').animate({scrollTop:$(id).offset().top}, 'slow');
    });
});

Sauf mention contraire*, l'article Effet de smooth scroll avec jQuery et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.