JQuery animation effects animate and scrollTop are used in combination with instances

  • 2020-03-30 02:32:13
  • OfStack

CSS property values are changed gradually so that you can create an animation.
Only numeric values can be animated (such as "margin:30px").
String values cannot be animated (such as "background-color:red").

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

The code above indicates that the scroll bar jumps to 0 and the page moves at 800.
Combined with the practical example of scrollTop:

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);
 });
});

Click the correlation ID to move to the specified location:
Click on the element with ID shang to return to the top;
Click the element with the ID of comt and return to the position with the ID of comments.
Click on the element with the ID of xia and go back to the bottom.


Related articles: