jQuery implements the return to top function suitable for browsers that do not support js_jquery

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:

<p id="back-to-top"><a href="#top" rel="external nofollow" ><span></span>返回顶部</a></p>

The a tag points to the anchor point top, which can prevent an anchor point of at the top, so that the effect of returning to the top can also be achieved when the browser does not support js. .

If you want the image returned to the top to be displayed on the right, you also 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; 
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ 
-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; 
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ 
-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&#63;1202) no-repeat -25px -290px; 
}

The background image in the above style is a sprite image. Two separate return to top images are provided below for friends to use:

With html and styles, we also need to use js to control the return to top button, which will fade in and out when the page scrolls.

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 
<script> 
$(function(){ 
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 
$(function () { 
$(window).scroll(function(){ 
if ($(window).scrollTop()>100){ 
$("#back-to-top").fadeIn(1500); 
} 
else 
{ 
$("#back-to-top").fadeOut(1500); 
} 
}); 

//当点击跳转链接后，回到页面顶部位置 

$("#back-to-top").click(function(){ 
$('body,html').animate({scrollTop:0},1000); 
return false; 
}); 
}); 
}); 
</script>

That’s it.

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