Comment puis-je utiliser jQuery pour créer un défilement fluide vers des éléments spécifiques sur mon site Web ?

Sauter ou faire défiler vers une cible spécifique à partir d'un clic sur un bouton

Vous souhaitez permettre à l'utilisateur de naviguer verticalement sur votre page Web en cliquant sur un bouton qui déclenche un saut ou un défilement vers un div ou un élément spécifié avec un ID particulier. Pour cela, vous pouvez utiliser jQuery pour obtenir sans effort la fonctionnalité souhaitée.

Une méthode consiste à attribuer un style CSS à un lien qui ressemble à un bouton. Cette approche garantit un mécanisme de secours pour les environnements non JavaScript, permettant un saut standard sans animation.

Voici un exemple optimisé utilisant les capacités d'animation de jQuery :

<code class="javascript">$(document).ready(function() {
  $(".jumper").on("click", function( e ) {
    e.preventDefault();
    $("body, html").animate({ 
      scrollTop: $( $(this).attr('href') ).offset().top 
    }, 600);
  });
});</code>

Dans votre structure HTML, vous pouvez définir des liens avec la classe « jumper » qui renvoient vers des éléments spécifiques de la page. Par exemple :

<code class="html"><a class="jumper" href="#element-1">Element 1</a></code>

Lorsqu'un utilisateur clique sur ce lien, le code jQuery fourni lancera un défilement animé vers l'élément portant l'ID "element-1", offrant une expérience de navigation fluide et visuellement attrayante.

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!