可以點擊這裡體驗效果：http:///keleyi/phtml/gototop.htm
返回頂部效果的純文本實例：http:///a/bjac/6f008786225269ac.htm
以下是本實例（圖片版）的源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>返回頂部完整代碼 - </title>
<meta name="keywords" content=",www.,返回頂部完整代碼"/>
<meta name="description" content=",,返回頂部完整代碼" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.8.2.min.js"></script>
<style type="text/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:#000;
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('http:///keleyi/pmedia/go-top-keleyi-com.png') no-repeat -10px 15px;
display:block;
height:90px;
width:90px;
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('http:///keleyi/pmedia/go-top-keleyi-com.png') no-repeat -10px 18px;
}
</style>
</head>
<body>
<p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>
<div style="background-color:#959822; width:100%;height:150px;">請滾動鼠標使頁面向下</div>
<div style="background-color:Green; width:100%;height:150px;">www.</div>
<div style="background-color:Red; width:100%;height:150px;">歡迎</div>
<div style="background-color:Yellow; width:100%;height:150px;">hi</div>
<div style="background-color:Silver; width:100%;height:150px;"></div>
<div style="background-color:Aqua; width:100%;height:150px;"></div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;"></div>
<div style="background-color:Blue; width:100%;height:150px;"></div>
<div style="background-color:Olive; width:100%;height:150px;"> 返回頂部</div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;">B</div>
<div style="background-color:Lime; width:100%;height:150px;"></div>
<div style="background-color:Orange; width:100%;height:150px;">完整代碼</div>
<script type="text/javascript">
$(function () {
//當滾動條的位置處於距頂部100像素以下時，跳轉鏈接出現，否則消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(100);
}
else {
$("#back-to-top").fadeOut(100);
}
});
//當點擊跳轉鏈接後，回到頁面頂部位置
$("#back-to-top").click(function () {
$('body,html').animate({ scrollTop: 0 }, 0);
return false;
});
});
});
</script>
</body>
</html>