點擊這裡體驗效果
以下是源代碼：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qq空間返回頂部jqurey效果-</title>
<style>
body {
font-family: Tahoma;
font-size: 12px;
line-height: 1.334;
}
.fix-layout {
bottom: 20px;
position: fixed;
right: 20px;
z-index: 20;
}
.gb-operation-area {
width: 45px;
}
.gb-operation-area .gb-operation-button {
display: block;
height: 45px;
overflow: hidden;
position: relative;
text-decoration: none;
}
.gb-operation-area .gb-operation-button .gb-operation-icon {
display: block;
height: 25px;
margin: 10px auto 0;
width: 25px;
}
.gb-operation-area .gb-operation-button .gb-operation-text {
display: none;
margin-top: 15px;
text-align: center;
text-decoration: none;
}
.gb-operation-area .gb-operation-button:hover .gb-operation-text {
display: block;
}
.gb-operation-area .gb-operation-button:hover .gb-operation-icon {
display: none;
}
.os-ios .gb-operation-area .gb-operation-button:hover .gb-operation-text {
display: none;
}
.os-ios .gb-operation-area .gb-operation-button:hover .gb-operation-icon {
display: block;
}
.gb-operation-area .return-top .gb-operation-icon {
background-image: url("http:///keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212");
background-position: 0 -42px;
}
.gb-operation-area .feedback .gb-operation-icon {
background-image: url("http:///keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212");
background-position: -26px -42px;
margin-left: 11px;
width: 28px;
}
.gb-operation-area .hot-msg .gb-operation-icon {
background-image: url("http:///keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212");
background-position: -55px -42px;
}
.gb-operation-area .report .gb-operation-icon {
background-image: url("http:///keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212");
background-position: -81px -42px;
}
.gb-operation-area {
border: 1px solid #C7E5EB;
}
.gb-operation-area .gb-operation-button {
background-color: #F2FDFF;
color: #7E8A8C;
}
.gb-operation-area .gb-operation-button:hover {
background-color: #FFFFFF;
}
.gb-operation-area .hot-msg {
border-top: 1px solid #DDEDF0;
}
.gb-operation-area .report {
border-top: 1px solid #DDEDF0;
}
</style>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#goto_top_btn').click(function() {
var s = $(window).scrollTop(),h = $(window).height();
if (s > h * 2) {
$('html, body').scrollTop(0);
} else {
$('html,body').animate({scrollTop: '0px'}, 300);
}
});
});
</script>
</head>
<body style="height:3000px;margin:0px;background-color:Olive">
<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:350px;"><a href="http:///a/bjac/hkppr014.htm" target="_blank">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;"></div>
<div style="background-color:Orange; width:100%;height:150px;">完整代碼</div>
<div style="height:130px;"></div>
<div class="fix-layout">
<div id="_returnTop_layout_inner" class="gb-operation-area">
<a id="goto_top_btn" class="gb-operation-button return-top" href="javascript:;">
<i class="gb-operation-icon" title="返回頂部"></i>
<span class="gb-operation-text">頂部</span>
</a>
<a id="" class="gb-operation-button report" href="javascript:;" style="display: block;">
<i class="gb-operation-icon" title="舉報"></i>
<span class="gb-operation-text">舉報</span>
</a>
</div>
</div>
</body>
</html>