在一些網(wǎng)站上，我們經(jīng)常見到返回頂部的效果，本文給大家介紹基于jquery如何實現(xiàn)返回頂部效果。感興趣的朋友跟著小編一起看下實現(xiàn)代碼吧。
首先需要在頂部添加如下html元素：
<p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>
其中a標(biāo)簽指向錨點top，可以在頂部防止一個<a name="top"></a>的錨點，這樣在瀏覽器不支持js時也可以實現(xiàn)返回頂部的效果了。
要想讓返回頂部的圖片顯示在右側(cè)，還需要一些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屬性給跳轉(zhuǎn)鏈接中的文字添加漸變效果*/
-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>標(biāo)簽背景顏色添加漸變效果*/
-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控制返回頂部按鈕，在頁面滾動時漸隱漸現(xiàn)返回頂部按鈕。
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
//當(dāng)滾動條的位置處于距頂部100像素以下時，跳轉(zhuǎn)鏈接出現(xiàn)，否則消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});
//當(dāng)點擊跳轉(zhuǎn)鏈接后，回到頁面頂部位置
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
});
</script>
這樣就可以了。
注意在載入頁面后需要向下拖動一點滾動條才可以看到返回頂部的效果圖。
下面在給大家分享一段jquery回到頂部代碼
1. 頁面內(nèi)容較多， 從底部超鏈接 點擊回到頁面頂部
// 回到頂部
var $top = $('<a href="javascript:;">TOP</a>')
.on('click', function () {
$(window).scrollTop(0);
return false;
});
$('body').append($top);