JS commonly used to return to the top of the page several methods

Web page programming often used to return the top of the page code, back to the top of the method only two: one is to jump directly to the top, the second is to use JS to add scrolling effect, on the code, the concept of the consistent days, less to write nonsense, as much as possible in the code and experience to seek balance, rather than spend a lot of effort to write a twenty or thirty lines of code to return to the top , instead focus on improving the content of the site.

First, use the anchor mark
the simplest way to do this is to have a hidden anchor tag in the body, which reads as follows:

The code is as follows	Copy Code
<a name= ' top ' id= ' top ' ></a>

Then, place an access link at the bottom of the page:

The code is as follows	Copy Code
<a href= "#top" target= "_self" > Back to Top </a>

The effect of this method is to jump to the top one at a time, and the URL address bar will display a #top, and the pursuit of perfection can be achieved by using the following methods.

Second, the use of JS Scrollto function
the JavaScript scroll function (Scrollby scrollto) is used to scroll the page to a specified location, with the following format defined:

Scrollby (Xnum,ynum)
Scrollto (Xpos,ypos)
which

Xnum,ynum refers to how many pixels to scroll horizontally and vertically, positive values to scroll right or down, negative values to scroll left or up
Xpos,ypos refers to horizontal and vertical coordinates, respectively.
Use examples:

The code is as follows	Copy Code
<a href= "Javascript:scrollto (0,0);" > Back to Top </a>

Third, Scrollby slow scrolling back to the top
This method uses the Scrollby function mentioned above, each time only the quantitative pixel scrolling, the overall looks a bit scrolling effect, the code is as follows:

The code is as follows	Copy Code
var sdelay=0; function Returntop () { Window.scrollby (0,-100);//only for y Vertical-axis if (document.body.scrolltop>0) { sdelay= settimeout (' Returntop () ', 50); } }

Scrollby function The second parameter I set-100, the larger (for example, 10) the slower the scrolling, the smaller the faster scrolling, start scrolling just add a link at the bottom of the page:

The code is as follows	Copy Code
<a href= "Javascript:returntop ();" > Back to Top </a>

jquery Implementation returns top function

First you need to add the following HTML element at the top:

<p id= "Back-to-top" ><a href= "#top" ><span></span> back to top </a></p>
Where a tag points to the top of the anchor, you can prevent a <a name= the anchor point of the peak ></a>, so that when the browser does not support JS, it can also achieve the effect of returning to the top.

To get the top picture to appear on the right, you'll need some CSS styles as follows:

The code is as follows

Copy Code

/*returntop*/ p#back-to-top{ position:fixed; Display:none; bottom:100px; right:80px; } P#back-to-top a{ Text-align:center; Text-decoration:none; Color: #d1d1d1; Display:block; width:64px; /* Use the Transition property in CSS3 to add a gradient effect to the text in the Jump link. -moz-transition:color 1s; -webkit-transition:color 1s; -o-transition:color 1s; } P#back-to-top a:hover{ Color: #979797; } P#back-to-top a span{ Background:transparent URL (/static/imgs/sprite.png?1202) no-repeat-25px-290px; border-radius:6px; Display:block; height:64px; width:56px; margin-bottom:5px; /* Use the Transition property in CSS3 to add a gradient effect to the <span> label background color * * -moz-transition:background 1s; -webkit-transition:background 1s; -o-transition:background 1s; } #back-to-top a:hover span{ Background:transparent URL (/static/imgs/sprite.png?1202) no-repeat-25px-290px; }

　　

The background image in the above style is Sprite, which provides two separate top pictures for your friends to use:

With HTML and style, we also need to use JS control to return to the top button, in the page scrolling fade gradually fade back to the top button.

The code is as follows

Copy Code

<script src= "Http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js" ></script> <script> $ (function () { When the scroll bar is positioned below 100 pixels from the top, the jump link appears or disappears $ (function () { $ (window). Scroll (function () { if ($ (window). scrolltop () >100) { $ ("#back-to-top"). FadeIn (1500); } Else { $ ("#back-to-top"). fadeout (1500); } }); When you click on the jump link, go back to the top of the page             $ ("#back-to-top"). Click (function () {                 $ (' body,html '). Animate ({scrolltop:0},1000);                 return false;            });        });    }); </script>