Home > Developer > Web Develop
It is very convenient to use the anchor point for the page, but to increase the effect of the page, you can use animate in jquery to achieve a scrolling action, and slowly scroll to the position you want to jump to, thus looking very tall.
Scroll to the top:
$ ('. Scroll_top '). Click (function () {$ (' html,body '). Animate ({scrolltop: ' 0px '}, 800);});Scroll to the specified position:
$ ('. Scroll_a '). Click (function () {$ (' html,body '). Animate ({scrolltop:$ ('. a '). Offset (). Top}, 800);});Scroll to the bottom:
$ ('. Scroll_bottom '). Click (function () {$ (' html,body '). Animate ({scrolltop:$ ('. Bottom '). Offset (). Top}, 800);});Source:
<!DOCTYPE><HTML><Head><MetaCharSet=utf-8 "/><title>JS smooth scrolling to top, bottom, specified place</title><Scripttype= "Text/javascript"src= "Http://www.daixiaorui.com/Public/js/jquery.min.js"></Script><style>. Box{Height:200px;width:100%;background:#ccc;margin:10px 0;}. location{position:fixed; Right:0;Bottom:10px;width:20px;background:#FFC;padding:5px;cursor:Pointer;Color:#003};</style></Head><Body><Divclass= "box"></Div><Divclass= "box"></Div><Divclass= "box"></Div><Divclass= "box"></Div><Divclass= "Box A">Product Introduction Products Http://www.daixiaorui.com Products Introduction Products Product Introduction Products Product Introduction Product Introduction Product Introduction Product Product Introduction</Div><Divclass= "box"></Div><Divclass= "box"></Div><Divclass= "box"></Div><Divclass= "box"></Div><Divclass= "Box Bottom"></Div><Divclass= "Location"> <Pclass= "Scroll_top">Back to Top</P> <Pclass= "Scroll_a">Product introduction</P> <Pclass= "Scroll_bottom">Slip to the bottom of the</P></Div><Scripttype= "Text/javascript">jQuery (document). Ready (function($){ $('. Scroll_top'). Click (function(){$('Html,body'). Animate ({scrolltop:'0px'}, -);}); $('. Scroll_a'). Click (function(){$('Html,body'). Animate ({scrolltop:$ ('. A'). Offset (). Top}, -);}); $('. Scroll_bottom'). Click (function(){$('Html,body'). Animate ({scrolltop:$ ('. Bottom'). Offset (). Top}, -);}); });</Script></Body></HTML>
Article from: http://www.daixiaorui.com/read/92.html, only for the collection of learning! Thank you!
JS Smooth scroll to top, bottom, specify place
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
