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>
