Comment puis-je implémenter un défilement fluide pour les liens d'ancrage ?

Obtenir un défilement fluide avec des liens d'ancrage

L'intégration d'hyperliens vers des FAQ dans une section d'aide est une approche courante pour guider les utilisateurs vers des informations spécifiques. Bien que les liens d'ancrage permettent le défilement des pages vers l'emplacement cible, obtenir une expérience de défilement fluide peut améliorer l'interaction de l'utilisateur.

Solutions natives et basées sur jQuery

Les dernières versions des navigateurs prend désormais en charge une solution native pour un défilement fluide des ancres.

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

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

Pour une compatibilité plus large avec les navigateurs, jQuery propose une alternative technique :

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

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

De plus, jQuery gère les cas où l'élément cible n'a pas d'ID.

 $('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') peut considérablement améliorer 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

Si la mise à jour de l'URL lors du défilement est souhaitée, elle peut être réalisée dans le rappel de l'animation.

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!