Home > Web Front-end > JS Tutorial > Examples of using jQuery animation effects animate and scrollTop together_jquery

Examples of using jQuery animation effects animate and scrollTop together_jquery

WBOY
Release: 2016-05-16 16:53:45
Original
1552 people have browsed it

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

Copy code The code is as follows:
$('#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:
Copy code 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);
});
});

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;
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template