1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 5 <meta charset="UTF-8" /> 6 <title>top</title> 7 <meta name="keywords" content="" /> 8 <meta name="description" content="" /> 9 <style type="text/css"> 10 *{margin:0;padding:0;} 11 body{font-size:12px;font-family:"微软雅黑";font-color:#666;} 12 .top{width:100%;height:1000%;position:relative;} 13 .top #toTop{display:block;width:60px;height:80px;background:#666;position:fixed; 14 bottom:120px;right:0;opacity:0.8;filter:alpha(opacity=80);text-align:center; 15 line-height:80px;display:none; 16 } 17 .top #toTop:hover{background:#000;} 18 .top #toTop i{background:url("iconfont-xiangshangshouqi.png") no-repeat;width:32px; 19 display:inline-block;height:32px;margin-top:23px; 20 } 21 </style> 22 </head> 23 <body> 24 25 <div class="top"> 26 <ul> 27 <li><img src="1.png" alt="" width="1361" height="664" /></li> 28 <li><img src="1.png" alt="" width="1361" height="664" /></li> 29 <li><img src="1.png" alt="" width="1361" height="664" /></li> 30 <li><img src="1.png" alt="" width="1361" height="664" /></li> 31 <li><img src="1.png" alt="" width="1361" height="664" /></li> 32 <li><img src="1.png" alt="" width="1361" height="664" /></li> 33 <li><img src="1.png" alt="" width="1361" height="664" /></li> 34 </ul> 35 36 <a href="javascript:void(0);" id="toTop"><i></i></a> 37 </div> 38 39 <script type="text/javascript" src="jquery-1.11.3.min.js"></script> 40 41 <script type="text/javascript"> 42 $(function(){ 43 $("#toTop").click(function(){ 44 $("body,html").animate({scrollTop:0},1000); 45 }); 46 47 48 $(window).scroll(function(){ 49 if($(window).scrollTop() >= 200){ 50 $("#toTop").stop(true,true).fadeIn(1000); 51 }else{ 52 $("#toTop").stop(true,true).fadeOut(1000); 53 } 54 }); 55 }); 56 57 58 59 </script> 60 </body> 61 </html>