Using jquery to return to top functionality

Many sites have the effect of returning to the top , and this article explains how to use jquery to return to the top button.

You first 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 point, you can prevent an anchor point at the tip <a name="top"></a> , so that you can also achieve the top effect when the browser does not support JS.

To make the top picture appear on the right, you'll need some CSS styling, as follows:

/*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;    /* Add a gradient effect to the text in the Jump link using the Transition property in CSS3 */-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 picture in the above style is sprite chart, below provides two separate back top pictures for friends to use:

  

with HTML and style, we also need to use the JS control to return to the top button, and fade out to the top button as the page scrolls.

<script src=" Http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js "></script ><script>$ (function () {////When the position of the scrollbar is below 100 pixels from the top, the jump link appears, otherwise disappears $ (function () {$ (window). Scro                ll (function () {if (window). scrolltop () >100) {$ ("#back-to-top"). FadeIn (1500);                } else {$ ("#back-to-top"). FadeOut (1500);            }            }); When you click the Jump link, go back to the top of the page at $ ("#back-to-top"). Click (function () {$ (' body,html '). Animate ({scrolltop:0},100                0);            return false;        });    }); }); </script> 

That's all you can do.

Note that you need to drag a little scroll bar down after loading the page to see the top of the back.