CSS property values change gradually, allowing you to create animated effects.
Only numeric values can be animated (e.g. "margin:30px").
String values cannot be animated (such as "background-color:red").
$('#shang').click(function(){$ ('html,body').animate({scrollTop: '0px'}, 800);});
The above code indicates that the scroll bar jumps to the 0 position, and the page movement speed is 800.
Practical example combining 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);
});
});
means clicking on the relevant ID to move to the specified position:
The click ID is shang element, return to the top;
Click the element with ID comt, return to the position with ID comments;
Click the element with ID xia, return to the bottom;