Home > Web Front-end > JS Tutorial > Use jquery animate to create a smooth scrolling effect (can be to the top, to the bottom or a specified place)_jquery

Use jquery animate to create a smooth scrolling effect (can be to the top, to the bottom or a specified place)_jquery

WBOY
Release: 2016-05-16 16:46:54
Original
1320 people have browsed it

It is indeed convenient to use anchor points to jump on the page, but if you want to increase the effect of the web page, you can use animate in jquery to achieve a scrolling action, and slowly scroll to the position you want to jump to. It will look very classy.

Scroll to top:

Copy code The code is as follows:
$('.scroll_top').click(function(){$ ('html,body').animate({scrollTop: '0px'}, 800);});

Scroll to the specified position:

Copy code The code is as follows:
$('.scroll_a').click(function(){$ ('html,body').animate({scrollTop:$('.a').offset().top}, 800);});


Complete example source code reference:

Copy code The code is as follows:

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">


js smoothly scrolls to the top, bottom, and specified place







product introductionproduct introductionproduct introductionproduct Introduction product introduction product introduction product introduction product introduction product introduction product introduction product introduction product introduction product introduction product introduction product introduction





< ;div class="box bottom">


Back to top


Product Introduction< /p>

Scroll 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 Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template