js+JQuery返回頂部功能如何實現(xiàn)
更新時間:2012年12月03日 10:37:37 作者:
很多網(wǎng)站上都有返回頂部的效果,本文闡述如何使用jquery實現(xiàn)返回頂部按鈕,需要的朋友可以參考下
很多網(wǎng)站上都有返回頂部的效果,本文闡述如何使用jquery實現(xiàn)返回頂部按鈕。
首先需要在頂部添加如下html元素:
<p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>其中a標簽指向錨點top,可以在頂部防止一個<a name="top"></a>的錨點,這樣在瀏覽器不支持js時也可以實現(xiàn)返回頂部的效果了。
要想讓返回頂部的圖片顯示在右側,還需要一些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控制返回頂部按鈕,在頁面滾動時漸隱漸現(xiàn)返回頂部按鈕。
復制代碼 代碼如下:
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
//當滾動條的位置處于距頂部100像素以下時,跳轉鏈接出現(xiàn),否則消失
$(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>
這樣就可以了,你可以通過下面的地址觀看實際的效果:
http://outofmemory.cn/code-snippet/tagged/javascript
注意在載入頁面后需要向下拖動一點滾動條才可以看到返回頂部的效果圖。
相關文章
CSS3結合jQuery實現(xiàn)動畫效果及回調函數(shù)的實例
下面小編就為大家分享一篇CSS3結合jQuery實現(xiàn)動畫效果及回調函數(shù)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法
這篇文章主要介紹了AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法,需要的朋友可以參考下2014-06-06