返回顶部实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>返回顶部实例</title>
 5     <style>
 6         .c1 {
 7             width: 80px;
 8             height: 30px;
 9             position: fixed;
10             bottom: 20px;
11             right: 20px;
12             background-color: yellow;
13  
14         }
15         .hide {
16             display: none;
17         }
18      
19     </style>
20 </head>
21 <body>
22  
23 <input type="button" name="" value="click me!" class="c1 hide">
24  
25 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
26 <script>
27     $(window).on("scroll", function(){
28         if ($(window).scrollTop()>200){
29             $(".c1").removeClass("hide");
30         } else {
31             $(".c1").addClass("hide");
32         }
33     });
34     $(".c1").on("click", function(){
35         $(window).scrollTop(0);
36     });
37 </script>
38  
39 </body>
40 </html>