jQuery-使页面回到顶部

来源：cnblogs　　作者：Tynam.Yang　　时间：2019/6/17 8:59:57　　对本文有异议

 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>

结果

原文链接：http://www.cnblogs.com/tynam/p/11037407.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章