Exemples d'utilisation des effets d'animation jQuery animate et scrollTop ensemble_jquery

Les valeurs des propriétés CSS changent progressivement, vous permettant de créer des effets animés.
Seules les valeurs numériques peuvent être animées (par exemple "margin:30px").
Les valeurs de chaîne ne peuvent pas être animées (telles que "background-color:red").

Copier le code Le code est le suivant :

$('#shang').click(function( ){$ ('html,body').animate({scrollTop: '0px'}, 800);});

Le code ci-dessus indique que la barre de défilement passe à la position 0 et que la page la vitesse de déplacement est de 800.
Exemple pratique combinant scrollTop :

Copier le code Le code est le suivant :

jQuery (document) .ready(function($){
$('#shang').click(function(){
$('html,body').animate({scrollTop : '0px'}, 800);
});
$('#comt').click(function(){
$('html,body').animate({scrollTop:$('#comments') .offset( ).top}, 800);
});
$('#xia').click(function(){
$('html,body').animate({scrollTop :$( '#footer').offset().top}, 800);
});
});

signifie cliquer sur l'ID correspondant pour se déplacer vers la position spécifiée :
L'ID de clic est l'élément shang, retournez en haut ;
Cliquez sur l'élément avec l'ID comt, revenez à la position avec les commentaires d'ID
Cliquez sur l'élément avec l'ID xia, revenez en bas ; >