jQuery-使页面回到顶部
程序员文章站
2022-06-29 08:10:23
结果 ......
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>
结果
上一篇: 前端之jquery2
下一篇: 高性能js-笔记