Comment puis-je implémenter un défilement fluide pour les liens d'ancrage à l'aide de JavaScript et jQuery ?

Création d'un défilement fluide pour les liens d'ancrage

Le défilement fluide améliore l'expérience utilisateur lors de l'utilisation de liens d'ancrage pour naviguer dans une page. Cet article propose deux approches pour obtenir cet effet : une méthode native compatible avec les navigateurs modernes et une implémentation jQuery pour une prise en charge plus large.

Méthode native pour les navigateurs modernes :

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

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

Méthode jQuery pour les plus âgés Navigateurs :

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

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

Remarque : Pour les éléments sans identifiant, cette variante doit être utilisée :

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

    return false;
});

Optimisation des performances :

Pour améliorer les performances, mettez en cache le $('html, body') sélecteur :

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

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

    return false;
});

Mise à jour de l'URL :

Dans les cas où vous souhaitez que l'URL reflète la section actuelle, utilisez cette variante :

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;
});

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!