Beispiele für die Verwendung von jQuery-Animationseffekten animate und scrollTop together_jquery

CSS-Eigenschaftswerte ändern sich schrittweise, sodass Sie animierte Effekte erstellen können.
Nur ​​numerische Werte können animiert werden (z. B. „margin:30px“).
String-Werte können nicht animiert werden (z. B. „background-color:red“).

Code kopieren Der Code lautet wie folgt:

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

Der obige Code zeigt an, dass die Bildlaufleiste zur 0-Position springt und die Seite Die Bewegungsgeschwindigkeit beträgt 800.
Praktisches Beispiel für die Kombination von scrollTop:

Code kopieren Der Code lautet wie folgt:

jQuery (Dokument) .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);
});
});

bedeutet, dass Sie auf die entsprechende ID klicken, um zur angegebenen Position zu gelangen:
Die Klick-ID ist shang-Element, zurück nach oben;
Klicken Sie auf das Element mit der ID comt, kehren Sie zur Position mit der ID-Kommentare zurück
Klicken Sie auf das Element mit der ID xia, kehren Sie nach unten zurück; >