点击这里体验效果
以下是源代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>qq空间返回顶部代码-柯乐义</title> 6 <style> 7 body { 8 font-family: Tahoma; 9 font-size: 12px; 10 line-height: 1.334; 11 } 12 .fix-layout { 13 bottom: 20px; 14 position: fixed; 15 right: 20px; 16 z-index: 20; 17 } 18 .gb-operation-area { 19 width: 45px; 20 } 21 .gb-operation-area .gb-operation-button { 22 display: block; 23 height: 45px; 24 overflow: hidden; 25 position: relative; 26 text-decoration: none; 27 } 28 .gb-operation-area .gb-operation-button .gb-operation-icon { 29 display: block; 30 height: 25px; 31 margin: 10px auto 0; 32 width: 25px; 33 } 34 .gb-operation-area .gb-operation-button .gb-operation-text { 35 display: none; 36 margin-top: 15px; 37 text-align: center; 38 text-decoration: none; 39 } 40 .gb-operation-area .gb-operation-button:hover .gb-operation-text { 41 display: block; 42 } 43 .gb-operation-area .gb-operation-button:hover .gb-operation-icon { 44 display: none; 45 } 46 .os-ios .gb-operation-area .gb-operation-button:hover .gb-operation-text { 47 display: none; 48 } 49 .os-ios .gb-operation-area .gb-operation-button:hover .gb-operation-icon { 50 display: block; 51 } 52 .gb-operation-area .return-top .gb-operation-icon { 53 background-image: url("http://keleyi.com/keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212"); 54 background-position: 0 -42px; 55 } 56 .gb-operation-area .feedback .gb-operation-icon { 57 background-image: url("http://keleyi.com/keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212"); 58 background-position: -26px -42px; 59 margin-left: 11px; 60 width: 28px; 61 } 62 .gb-operation-area .hot-msg .gb-operation-icon { 63 background-image: url("http://keleyi.com/keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212"); 64 background-position: -55px -42px; 65 } 66 .gb-operation-area .report .gb-operation-icon { 67 background-image: url("http://keleyi.com/keleyi/phtml/totop/3/keleyiqqtop.png?max_age=19830212"); 68 background-position: -81px -42px; 69 } 70 71 .gb-operation-area { 72 border: 1px solid #C7E5EB; 73 } 74 .gb-operation-area .gb-operation-button { 75 background-color: #F2FDFF; 76 color: #7E8A8C; 77 } 78 .gb-operation-area .gb-operation-button:hover { 79 background-color: #FFFFFF; 80 } 81 .gb-operation-area .hot-msg { 82 border-top: 1px solid #DDEDF0; 83 } 84 .gb-operation-area .report { 85 border-top: 1px solid #DDEDF0; 86 } 87 </style> 88 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 89 <script type="text/javascript"> 90 $(function(){ 91 $('#goto_top_btn').click(function() { 92 var s = $(window).scrollTop(),h = $(window).height(); 93 if (s > h * 2) { 94 $('html, body').scrollTop(0); 95 } else { 96 $('html,body').animate({scrollTop: '0px'}, 300); 97 } 98 }); 99 }); 100 </script> 101 </head> 102 <body style="height:3000px;margin:0px;background-color:Olive"> 103 <div style="background-color:Red; width:100%;height:150px;">欢迎</div> 104 <div style="background-color:Yellow; width:100%;height:150px;">hi</div> 105 <div style="background-color:Silver; width:100%;height:150px;">柯乐义</div> 106 <div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div> 107 <div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div> 108 <div style="background-color:Green; width:100%;height:150px;">keleyi.com</div> 109 <div style="background-color:Blue; width:100%;height:150px;">柯乐义</div> 110 <div style="background-color:Olive; width:100%;height:150px;">柯乐义 返回顶部</div> 111 <div style="background-color:Green; width:100%;height:150px;">A</div> 112 <div style="background-color:Purple; width:100%;height:150px;">jquery</div> 113 <div style="background-color:Green; width:100%;height:350px;"><a href="http://keleyi.com/a/bjac/hkppr014.htm" target="_blank">原文</a></div> 114 <div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div> 115 <div style="background-color:Orange; width:100%;height:150px;">完整代码</div> 116 <div style="height:130px;"></div> 117 <div class="fix-layout"> 118 <div id="_returnTop_layout_inner" class="gb-operation-area"> 119 <a id="goto_top_btn" class="gb-operation-button return-top" href="javascript:;"> 120 <i class="gb-operation-icon" title="返回顶部"></i> 121 <span class="gb-operation-text">顶部</span> 122 </a> 123 <a id="" class="gb-operation-button report" href="javascript:;" style="display: block;"> 124 <i class="gb-operation-icon" title="举报"></i> 125 <span class="gb-operation-text">举报</span> 126 </a> 127 </div> 128 </div> 129 </body> 130 </html>
