当前位置: 移动技术网 > IT编程>开发语言>Jquery > jQuery-使页面回到顶部

jQuery-使页面回到顶部

2019年06月17日  | 移动技术网IT编程  | 我要评论
结果 ...
 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>

结果

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网