jquery animation effects animate and ScrollTop use instances together

jquery animation effects animate and ScrollTop use instances together

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

CSS property values are changed gradually so that 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 CodeThe code is as follows: $ (' #shang '). Click (function () {$ (' html,body '). Animate ({scrolltop: ' 0px '}, 800);});

The above code indicates that the scroll bar jumps to 0, and the page movement speed is 800.
Practical examples of combining scrolltop:

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

Indicates that the click Correlation ID is moved to the specified location:
Click on the element with ID Shang and go back 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, back to the bottom;

jquery animation effects animate and ScrollTop use instances together