jquery animation effects animate and ScrollTop combined usages

Animate is a function method of JQ, the Animate () method performs a custom animation of the CSS property set. This method changes the element from one state to another through a CSS style.

CSS property values are gradually changed, so you can create animation effects. Only numeric values can create animations (such as "margin:30px").   String values cannot create animations (such as "background-color:red"). The code is as follows: $ (' #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. Combining ScrollTop Practical Example: The code is as follows: 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 on the relevant ID to move to the specified location: Click on the Shang element, return to the top, click on the COMT element, return to the ID comments position, click the element with ID Xia, return to the bottom;