Défilement fluide lors du clic sur un lien d'ancrage

Lors de la navigation sur une page Web avec des liens d'ancrage, les utilisateurs s'attendent à une transition transparente vers la section cible. Cependant, le comportement de défilement par défaut peut être abrupt. Cet article explore les techniques permettant d'obtenir un défilement fluide lorsque vous cliquez sur des liens d'ancrage.

Support natif

Les navigateurs comme Chrome et Firefox ont introduit la prise en charge native du défilement fluide. Ceci est implémenté à l'aide de la propriété "behaviour" avec la valeur "smooth" lors du défilement dans la vue :

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Plugin jQuery

Pour les navigateurs plus anciens, un plugin jQuery peut fluidifier l'animation de défilement. Cette technique utilise la méthode "animer" pour déplacer la page vers la section cible :

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

Technique améliorée

Si l'élément cible n'a pas d'ID, le plugin jQuery modifié suivant peut être utilisé :

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="'   $.attr(this, 'href').substr(1)   '"]').offset().top
    }, 500);

    return false;
});

Optimisation des performances

La mise en cache du sélecteur "$('html, body')" dans une variable améliore les performances :

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

Préservation du hachage d'URL

Pour mettre à jour le hachage d'URL lors d'un défilement fluide, utilisez le rappel "animer":

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

En mettant en œuvre l'une de ces techniques, vous pouvez offrir une expérience de défilement soignée et conviviale lorsque vous naviguez sur votre page à l'aide de liens d'ancrage.