Comment faire défiler en douceur jusqu'à un élément spécifique à l'aide de l'animation jQuery en cliquant sur un bouton ?

Animer le défilement jusqu'à un élément spécifique en cliquant sur le bouton

Pour accéder ou faire défiler vers une position, un div ou une cible spécifique sur une page lorsqu'un est cliqué sur le bouton, vous pouvez utiliser les capacités d'animation de jQuery.

Structure HTML :

Créez un élément de bouton avec un identifiant ou une classe pour le référencer en JavaScript. Configurez également l'élément cible avec un identifiant vers lequel faire défiler.

JavaScript :

<code class="javascript">$('#clickMe').click(function() {
    $('html, body').animate({
        scrollTop: $('#targetElement').offset().top
    }, 600);
});</code>

Dans ce script, lorsque l'on clique sur le bouton #clickMe, il déclenche l'animation des éléments html et body pour défiler jusqu'au décalage supérieur du #targetElement. Le paramètre 600 définit la durée de l'animation en millisecondes.

Exemple :

Considérez la structure HTML suivante :

<code class="html"><a id="clickMe" href="#">Go to Div</a>

<div id="targetElement">Target Div</div></code>

Le JavaScript correspondant :

<code class="javascript">$('#clickMe').click(function() {
    $('html, body').animate({
        scrollTop: $('#targetElement').offset().top
    }, 600);
});</code>

Lorsque vous cliquez sur le bouton "Aller à Div", la page défilera en douceur jusqu'à l'élément "Target Div".

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!