Jq and javascript implement back-to-top Implementation Program

This article introduces two good implementation programs for returning to the top by using jq and javascript. For more information, see.

The jquery blog is now out of work on time. Recently, I am very tired. It is estimated that I have worked overtime ....

In other words, sometimes payment is not necessarily proportional to what you get, and you are entangled in this conflict ....

Mom is cooking delicious food. It's okay to come back early. I saw a lot of websites, such as Sina Weibo, have pages pulled to the bottom, and then have a back to the top. I feel pretty good. I have no idea about the user experience, I am very interested in Sina products and admire those front-end developers who are struggling with Sina.

Jquery DEMO

The Code is as follows:

Copy code

<Script type = "text/javascript" src = "/jquery. min. js"> </script> <Script> (Function (){ Var $ backToTopTxt = "Back to Top", $ backToTopBox = $ ('<div class = "backToTop"> </div>'). appendTo ($ ("body ")) . Text ($ backtoptxt). attr ("title", $ backtoptxt). click (function (){ $ ("Html, body"). animate ({scrollTop: 0}, 120 ); }), $ BackToTopBody = function (){ Var st = $ (document). scrollTop (), wh = $ (window). height (); (St> 0 )? $ BackToTopBox. show (): $ backToTopBox. hide (); // Positioning in 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>

Javasripversion 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.doc umentElement. scrollTop: document. body. scrollTop; Var moveby = 15; Y-= Math. ceil (y * moveby/100 ); If (y <0 ){ Y = 0; } If (goto_top_type = 1 ){ Document.doc umentElement. 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.doc umentElement & document.doc umentElement. 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 the top </a>

The above code has been tested and can be used directly. I personally recommend using the jquery version to return to the top.