Home > Developer > Web Develop
Article derived from: http://www.daixiaorui.com/read/92.html
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.
Example Demo address:http://www.daixiaorui.com/Public/demo/js/scroll.html
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <title>JS smooth scrolling to top, bottom, specified place</title>6 <Scripttype= "Text/javascript"src= "Http://www.daixiaorui.com/Public/js/jquery.min.js"></Script>7 <style>8 . Box{Height:200px;width:100%;background:#ccc;margin:10px 0;}9 . location{position:fixed; Right:0;Bottom:10px;width:20px;background:#FFC;padding:5px;cursor:Pointer;Color:#003};Ten </style> One </Head> A - <Body> - <Divclass= "box"></Div> the <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> A <Divclass= "box"></Div> at <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> in </Div> - <Scripttype= "Text/javascript"> to jQuery (document). Ready (function($){ + $('. Scroll_top'). Click (function(){$('Html,body'). Animate ({scrolltop:'0px'}, -);}); - $('. Scroll_a'). Click (function(){$('Html,body'). Animate ({scrolltop:$ ('. A'). Offset (). Top}, -);}); the $('. Scroll_bottom'). Click (function(){$('Html,body'). Animate ({scrolltop:$ ('. Bottom'). Offset (). Top}, -);}); * }); $ </Script>Panax Notoginseng </Body> - </HTML>
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
