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

Défilement fluide avec des liens d'ancrage

Lors de l'utilisation de liens d'ancrage pour diriger les utilisateurs vers des sections spécifiques d'une page Web, une expérience de défilement fluide peut améliorer l'accessibilité et l'engagement des utilisateurs. jQuery offre des fonctionnalités intégrées pour obtenir cet effet.

Technique jQuery

Pour lancer un défilement fluide à l'aide de jQuery, utilisez le code suivant :

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

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

Approche native (moderne Navigateurs)

Les navigateurs modernes prennent désormais en charge le défilement fluide natif pour les liens d'ancrage. Implémentez ce comportement avec le code suivant :

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

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

Considérations supplémentaires

Aucun attribut ID : Si l'élément cible n'a pas d'attribut ID mais est identifié par son nom, utilisez ce code :

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

    return false;
});

Optimisation des performances : Cachez le sélecteur racine du document pour améliorer les performances :

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

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

    return false;
});

Mise à jour de l'URL : Pour mettre à jour l'URL pendant le défilement, utilisez ce 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;
});

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!