How does js + JQuery return to the top?

Many websites have the result of returning to the top. This article describes how to use jquery to return to the top button.
First, add the following html elements to the top:
<P id = "back-to-top"> <a href = "# top"> <span> </span> return to the top </a> </p> where the label points to the top of the anchor, you can avoid a <a name = "top"> </a> anchor on the top of the page. In this way, if the browser does not support js, you can return the result on the top.
To display the image at the top of the returned result on the right side, you also need some css styles, as shown below:
Copy codeThe Code is as follows:
/* ReturnTop */
P # back-to-top {
Position: fixed;
Display: none;
Bottom: 100px;
Right: 80px;
}
P # back-to-top {
Text-align: center;
Text-decoration: none;
Color: # d1d1d1;
Display: block;
Width: 64px;
/* Use the transition attribute in CSS3 to add the gradient effect to the text in the jump link */
-Moz-transition: color 1 s;
-Webkit-transition: color 1 s;
-O-transition: color 1 s;
}
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 attribute in CSS3 to add a gradient effect to the <span> label background color */
-Moz-transition: background 1 s;
-Webkit-transition: background 1 s;
-O-transition: background 1 s;
}
# 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 a Sprite image. The following two independent back-to-top images are provided for your convenience:
   
With html and style, we also need to use js to control the return button on the top. When the page is scrolling, the return button will gradually fade away.
Copy codeThe Code is as follows:
<Script src = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"> </script>
<Script>
$ (Function (){
// When the position of the scroll bar is below 100 pixels from the top, the jump link appears; otherwise, it disappears.
$ (Function (){
$ (Window). scroll (function (){
If ($ (window). scrollTop ()> 100 ){
$ ("# Back-to-top"). fadeIn (1500 );
}
Else
{
$ ("# Back-to-top"). fadeOut (1500 );
}
});
// When you click the jump link, return to the top of the page
$ ("# Back-to-top"). click (function (){
$ ('Body, html '). animate ({scrollTop: 0}, 1000 );
Return false;
});
});
});
</Script>

In this way, you can view the actual effect through the following address:
Http://outofmemory.cn/code-snippet/tagged/javascript
Note: After loading the page, you need to drag down a scroll bar to see the return to the top.