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

Amélioration de la navigation par lien d'ancrage avec un défilement fluide

Le défilement fluide peut améliorer considérablement l'expérience utilisateur lors de la navigation dans votre page Web à l'aide de liens d'ancrage. En éliminant les sauts discordants et en offrant une transition fluide, vous améliorez l'accessibilité et l'esthétique globale de la page.

Utilisation de JavaScript natif

Les versions récentes des principaux navigateurs prennent désormais en charge le défilement fluide natif pour les liens d'ancrage. Vous pouvez implémenter cette fonctionnalité à l'aide du code suivant :

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

Solution jQuery

Pour la compatibilité des navigateurs plus anciens, jQuery propose une solution fiable :

$(document).on('click', 'a[href^="#"]', event => {
  event.preventDefault();
  $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500);
});

Gestion des éléments cibles Sans identifiants

Si l'élément cible n'a pas d'identifiant mais est lié par son nom, utilisez ce qui suit code :

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

Optimisation des performances

Pour plus d'efficacité, il est recommandé de mettre en cache le sélecteur $('html, body') :

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 l'animation de défilement, incluez le code suivant dans le champ rappel :

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

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

En incorporant ces techniques, vous pouvez offrir une expérience de navigation transparente et attrayante aux utilisateurs de votre site Web, ce qui rend la navigation dans le contenu de la page plus agréable.

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!