Comment puis-je obtenir un défilement fluide avec des liens d'ancrage ?

Défilement fluide en cliquant 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 lisser 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'identifiant, ce qui suit Le plugin jQuery modifié peut être utilisé :

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

    return false;
});

Performance Optimisation

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 de l'URL lors d'un défilement fluide, utilisez l'option "animer" rappel :

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 lors de la navigation sur votre page à l'aide de liens d'ancrage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!