qq空间返回顶部代码

点击这里体验效果

以下是源代码：

 <!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空间返回顶部代码-柯乐义</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.com/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.com/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.com/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.com/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.com/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;">keleyi.com</div>
 <div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
 <div style="background-color:Green; width:100%;height:150px;">keleyi.com</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://keleyi.com/a/bjac/hkppr014.htm" target="_blank">原文</a></div>
 <div style="background-color:Lime; width:100%;height:150px;">keleyi.com</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>

转载自：http://keleyi.com/a/bjac/hkppr014.htm

web前端：http://www.cnblogs.com/jihua/p/webfront.html