JQ and JavaScript implementations return to the top implementation program

jquery blog now on time to work, recently added a pretty tired, estimated to have overtime sequelae, rub ....

Say sometimes, pay and your harvest is not necessarily proportional, tangled in this, contradictions ....

Mother is cooking a delicious meal. Early back, also nothing, see a lot of websites such as Sina Weibo and so on have the page pulled to the bottom, and then there is a return to the top, I feel good, the user experience is not said, the individual is interested in Sina's products, admire those struggling in Sina front-end development.

jquery Version Demo

The code is as follows

Copy Code

<script type= "Text/javascript" src= "/jquery.min.js" ></SCRIPT> <script> ( {  var $backToTopTxt = "Back to top", $backToTopBox = $ (' <div class= ' backtotop ' ></div> '). Appendto ($ (" Body ")   .text ($BACKTOTOPTXT). attr (" title ", $backToTopTxt). Click (function () {     $ ("HTML, Body"). Animate ({scrolltop:0}, 120);  }), $backToTopBody = function () {   var st = $ (document). ScrollTop (), WH = $ (window). Height ();    (St > 0)? $backToTopBox. Show (): $backToTopBox. Hide ();     //ie6   if (!window. XMLHttpRequest) {     $backToTopBox. CSS ("Top", St + wh-166);     }    $ (window). Bind ("scroll", $backToTopBody);  $ (function () {$backToTopBody ();}); }) (); </script> <div style= "width:100%;height:600px;margin:0 Auto" ></DIV>

Javasript Version Demo

The code is as follows

Copy Code

<div style= "width:100%;height:1600px;margin:0 Auto" ></div> <script type= "Text/javascript" > <! [cdata[ var goto_top_type =-1; var Goto_top_itv = 0; function Goto_top_timer () { var y = Goto_top_type = 1? Document.documentElement.scrollTop:document.body.scrollTop; var moveby = 15; Y-= Math.ceil (Y * moveby/100); if (Y < 0) { y = 0; } if (Goto_top_type = = 1) { Document.documentElement.scrollTop = y; } else { Document.body.scrollTop = y; } if (y = = 0) { Clearinterval (GOTO_TOP_ITV); GOTO_TOP_ITV = 0; } } function Goto_top () { if (Goto_top_itv = = 0) { if (document.documentelement && document.documentElement.scrollTop) { Goto_top_type = 1; } else if (document.body && document.body.scrollTop) { Goto_top_type = 2; } else { Goto_top_type = 0; } if (Goto_top_type > 0) { GOTO_TOP_ITV = SetInterval (' Goto_top_timer () ', 10); } } } ]]> </script> <a href= "javascript:void (0)" onclick= "Goto_top ()" style= "Float:right" > Return to Top </a>

The above code has been tested, directly to take the past can be used, oh, personally recommended using the jquery version of the top.