很酷炫哦，直接粘贴即可
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>jQuery火箭图标返回顶部代码</title> 6 <!--script src="js/jquery.js?v=1.83.min" type="text/javascript"></script--> 7 <script src="http://common.cnblogs.com/script/jquery.js?v=1.7.min" type="text/javascript"></script> 8 9 <style type="text/css"> 10 11 body{height:3000px;} 12 13 /*回到顶部*/ 14 #rocket-to-top div { 15 left: 0; 16 margin: 0; 17 overflow: hidden; 18 padding: 0; 19 position: absolute; 20 top: 0; 21 width: 149px; 22 } 23 #rocket-to-top .level-2 { 24 background: url("http://images.cnblogs.com/cnblogs_com/xujingyang/1227088/o_o_rocket_button_up.png") no-repeat scroll -149px 0 transparent; 25 display: none; 26 height: 250px; 27 opacity: 0; 28 z-index: 1; 29 } 30 #rocket-to-top .level-3 { 31 background: none repeat scroll 0 0 transparent; 32 cursor: pointer; 33 display: block; 34 height: 150px; 35 z-index: 2; 36 } 37 #rocket-to-top { 38 background: url("http://images.cnblogs.com/cnblogs_com/xujingyang/1227088/o_o_rocket_button_up.png") no-repeat scroll 0 0 transparent; 39 cursor: default; 40 display: block; 41 height: 250px; 42 margin: -125px 0 0; 43 overflow: hidden; 44 padding: 0; 45 position: fixed; 46 right: 0; 47 top: 80%; 48 width: 149px; 49 z-index: 11; 50 } 51 52 53 54 </style> 55 56 57 <script type="text/javascript"> 58 59 // jQuery火箭图标返回顶部代码 60 61 $(function() { 62 var e = $("#rocket-to-top"), 63 t = $(document).scrollTop(), 64 n, 65 r, 66 i = !0; 67 $(window).scroll(function() { 68 var t = $(document).scrollTop(); 69 t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({ 70 marginTop: "-1000px" 71 }, 72 "normal", 73 function() { 74 e.css({ 75 "margin-top": "-125px", 76 display: "none" 77 }), 78 i = !0 79 })) : e.fadeIn("slow") 80 }), 81 e.hover(function() { 82 $(".level-2").stop(!0).animate({ 83 opacity: 1 84 }) 85 }, 86 function() { 87 $(".level-2").stop(!0).animate({ 88 opacity: 0 89 }) 90 }), 91 $(".level-3").click(function() { 92 function t() { 93 var t = e.css("background-position"); 94 if (e.css("display") == "none" || i == 0) { 95 clearInterval(n), 96 e.css("background-position", "0px 0px"); 97 return 98 } 99 switch (t){ 100 case "0px 0px": 101 e.css("background-position", "-298px 0px"); 102 break; 103 case "-298px 0px": 104 e.css("background-position", "-447px 0px"); 105 break; 106 case "-447px 0px": 107 e.css("background-position", "-596px 0px"); 108 break; 109 case "-596px 0px": 110 e.css("background-position", "-745px 0px"); 111 break; 112 case "-745px 0px": 113 e.css("background-position", "-298px 0px"); 114 } 115 } 116 if (!i) return; 117 n = setInterval(t, 50), 118 $("html,body").animate({scrollTop: 0},"slow"); 119 }); 120 }); 121 122 </script> 123 124 125 126 </head> 127 <body> 128 <center> 129 <h2>jQuery火箭图标返回顶部代码</h2> 130 <h3>滚动滑动条后，查看右下角查看效果。很炫哦！！</h3> 131 </center> 132 133 134 <!-- 火箭 --> 135 <div style="display: none;" id="rocket-to-top"> 136 <div style="opacity:0;display: block;" class="level-2"></div> 137 <div class="level-3"></div> 138 </div> 139 140 141 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> 142 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> 143 </div> 144 </body> 145 </html>
效果图：
