整理兩個實現功能，一個是右下角的返回頂部，一個是右側的返回頂部，分別如圖
--------------------------------------分割線 --------------------------------------
jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm
jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm
《jQuery即學即用（雙色）》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm
jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm
--------------------------------------分割線 --------------------------------------
第一種實現
一、JSP或HTML(主體結構)
在body中添加
<body id="top">
<p id="back-to-top"><a href="#top"><span></span></a></p>
</body>
二、CSS(樣式化)
<style>
p#back-to-top {
position: fixed;
bottom: 50px;
right: 50px;
}
p#back-to-top a {
text-align: center;
text-decoration: none;
color: #d1d1d1;
display: block;
width: 50px;
/*使用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: #d1d1d1 url(/img/back_to_top.png) no-repeat center center;
border-radius: 6px;
display: block;
height: 50px;
width: 50px;
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: #979797 url(/img/back_to_top.png) no-repeat center center;
}
</style>
圖片自己網上找資源
三、jQuery(動態效果)
<script>
$(document).ready(function() {
//首先將#back-to-top隱藏
$("#back-to-top").hide();
//當滾動條的位置處於距頂部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
},
500);
return false;
});
});
});
</script>
更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2014-05/101746p2.htm