js JQuery回傳頂部功能如何實作_jquery

許多網站上都有返回頂部的效果，本文闡述如何使用jquery實現返回頂部按鈕。
首先需要在頂部添加以下html元素：

回到頂部其中a標籤指向錨點top，可以在頂部防止一個的錨點，這樣在瀏覽器不支援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屬性為標籤背景顏色添加漸變效果*/
-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> <BR>$(function(){ <BR>//當滾動條的位置處於頂部100像素以下時，跳轉連結出現，否則消失<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>//當點擊跳轉連結後，回到頁面頂部位置</script>

$("#back-to-top").click(function( ){
$('body,html').animate({scrollTop:0},1000);
return false;
}); }); }); 這樣就可以了，你可以透過下面的位址觀看實際的效果: http://outofmemory.cn/code-snippet/tagged/javascript 注意在載入頁面後需要向下拖曳一點捲軸才可以看到返回頂部的效果圖。