jquery animation effects animate and ScrollTop combined with instances _jquery

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").

Copy Code code 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.
Combined with scrolltop Practical example:

Copy Code code 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);
});
});

To move to a specified location by clicking on the correlation ID:
Click the element with ID Shang and return to the top;
Click on the element with ID COMT and return to the location with ID comments;
Click on the element with ID Xia and return to the bottom;