jQuery实现返回顶部 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         html,body{
 9             width: 100%;
10             height: 4000px;
11         }
12 
13         div{
14             width: 30px;
15             height: 90px;
16             background-color: #cccccc;
17             position: fixed;
18             right:20px;
19             bottom:20px;
20             display: none;
21             cursor: pointer;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="jet">
27         返回顶部
28     </div>
29 
30     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
31 
32     <script>
33         $(function () {
34             $(window).scroll(
35                 function () {
36                     if($(this).scrollTop()>1000){
37                         $(".jet").fadeIn(500);
38                     }else{
39                         $(".jet").fadeOut(500);
40                     }
41                 }
42             );
43 
44 
45             $(".jet").click(
46                 function () {
47                     $("html,body").stop().animate({scrollTop:0},500,"linear");
48                 }
49             );
50 
51 
52 
53         });
54     </script>
55 
56 </body>
57 </html>

 

posted @ 2019-06-26 16:02  programerfield  阅读(245)  评论(0)    收藏  举报