62
使用jQuery實現返回頂部功能
很多網站上都有返回頂部的效果，本文闡述如何使用jquery實現返回頂部按鈕。
首先需要在頂部添加如下html元素：
<p ><a href="#top"><span></span>返回頂部</a></p>
其中a標簽指向錨點top，可以在頂部防止一個<a name="top"></a>的錨點，這樣在瀏覽器不支持js時也可以實現返回頂部的效果了。
要想讓返回頂部的圖片顯示在右側，還需要一些css樣式，如下：
/*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?1202) no-repeat -25px -290px;
}
上麵樣式中的背景圖片是雪碧圖，下麵提供兩個單獨的返回頂部圖片方便朋友們使用：
有了html和樣式，我們還需要用js控製返回頂部按鈕，在頁麵滾動時漸隱漸現返回頂部按鈕。
<script src="https://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>
這樣就可以了。
注意在載入頁麵後需要向下拖動一點滾動條才可以看到返回頂部的效果圖。
最後更新：2017-04-03 05:39:57