Comment faire défiler en douceur vers le bas d'une page avec jQuery ?

Faites défiler vers un élément avec jQuery : animez en douceur jusqu'en bas de la page

Cet article explore une technique permettant de faire défiler en douceur une page Web au dernier élément en utilisant la dernière version de jQuery, sans recourir à des ressources externes plugins.

Problème :

Considérez la structure HTML suivante :

<input type="text">

L'objectif est de faire défiler automatiquement la page jusqu'au bouton de soumission, avec une animation fluide, lorsque l'utilisateur clique sur la saisie de texte avec l'identifiant "sujet."

Solution :

Pour y parvenir, nous pouvons exploiter la méthode animate() dans jQuery. Voici un exemple d'extrait de code :

$("#subject").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#submit").offset().top
    }, 2000);
});

Ce code :

1. Sélectionne l'élément d'entrée avec l'identifiant "sujet" à l'aide de jQuery.
2. Attache un événement de clic gestionnaire à l'élément d'entrée.
3. Au sein du gestionnaire d'événements, il anime le défilement du document, qui comprend à la fois des éléments HTML et du corps, en haut décalé du bouton de soumission avec un identifiant « soumettre ».
4. Spécifie la durée de l'animation à 2 000 millisecondes pour une expérience fluide.

Ce code garantit que lorsque l'utilisateur clique sur l'élément d'entrée, la page défile en douceur jusqu'au dernier élément, offrant ainsi une expérience utilisateur améliorée.

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!