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
WBOYOriginal
2016-05-16 16:46:541336browse

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





Statement:
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
Previous article:Use jQuery to implement editable tables_jqueryNext article:Use jQuery to implement editable tables_jquery

Related articles

See more