How to implement js JQuery return to top function

How to implement js JQuery return to top function_jquery

WBOY

Release： 2016-05-16 17:47:36

Original

981 people have browsed it

Many websites have a return to top effect. This article explains how to use jquery to implement a return to top button.
First you need to add the following html element at the top:

Return Top

The a tag points to the anchor point top, which can prevent an anchor point of at the top, so that the browser does not support js You can also achieve the effect of returning to the top.
If you want the image returned to the top to be displayed on the right, you also need some css styles, as follows:

Copy code Code 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 attribute 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 attribute in CSS3 to add a gradient effect to the  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 a sprite image , two separate return to top pictures are provided below for the convenience of friends:
go-top-icon

Yes HTML and style, we also need to use js to control the return to top button, which fades in and out when the page scrolls.

Copy code The code is as follows:

 
 
<script> <br>$(function(){ <br>//When the scroll bar When the position is below 100 pixels from the top, the jump link appears, otherwise it disappears <br>$(function () { <br>$(window).scroll(function(){ <br>if ($(window).scrollTop ()>100){ <br>$("#back-to-top").fadeIn(1500); <br>} <br>else <br>{ <br>$("#back-to- top").fadeOut(1500); <br>} <br>}); <br>//When clicking the jump link, return to the top of the page<br>$("#back-to-top") .click(function(){ <br>$('body,html').animate({scrollTop:0},1000); <br>return false; <br>}); <br>}); <br>}); <br></script> 

That’s it, you can watch the actual effect through the following address:
http://outofmemory.cn/code- snippet/tagged/javascript
Note that after loading the page, you need to drag the scroll bar down a little to see the effect of returning to the top.