1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>back-top</title> 7 <style type="text/css"> 8 #back-top{ 9 width: 40px; 10 height: 40px; 11 position: fixed; 12 bottom: 40px; 13 right: 20px; 14 border: solid gray; 15 text-align: center; 16 font-size: 14px; 17 cursor: pointer; 18 } 19 20 .contain { 21 margin: 0 auto; 22 width: 1000px; 23 height: 2000px; 24 background: red; 25 font-size: 400px; 26 } 27 </style> 28 <script src="jquery-3.4.1.js"></script> 29 <script> 30 $(function(){ 31 $('#back-top').click(function(){ 32 // html,body取并级,处理浏览器兼容 33 $("html,body").animate({ 34 scrollTop: 0, 35 screenLeft: 0, 36 }, 400); 37 }); 38 }); 39 </script> 40 </head> 41 <body> 42 <div id="back-top">回到顶部</div> 43 <div class="contain">这里是内容</div> 44 </body> 45 </html>
结果