jquery back to the top code _jquery

On some sites, we often see the effect of returning to the top, and this article gives you an introduction to how to achieve the top effect based on jquery. Interested friends follow the small knitting together to see the implementation code bar.

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

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:

/*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.

<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 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, go back to the top position of 

the page $ ("#back-to-top"). Click (function () { 
$ (' body,html '). Animate ({scrolltop:0},1000); 
return false;});}; 
 

That's it.

Note You need to drag down a little scroll bar to see the effect chart at the top of the page after loading it.

Here's a piece of jquery to share with you back to the top code

1. Page content more, from the bottom of the hyperlinks click Back to the top of the page

Back to top
var $top = $ (' <a class= "doc-gotop" href= "javascript:;" >TOP</a> ')
. On (' click ', Function () {
$ (window). scrolltop (0);
return false;
});
$ (' body '). Append ($top);