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>