网页常用的小工具--返回顶部 

 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>

 

posted @ 2015-09-16 09:25  悬崖边上  阅读(187)  评论(0)    收藏  举报