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>