码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-使页面回到顶部

时间:2019-06-17 01:14:48      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:char   tle   tom   scroll   oct   gif   mat   img   兼容   

 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>

结果

技术图片

jQuery-使页面回到顶部

标签:char   tle   tom   scroll   oct   gif   mat   img   兼容   

原文地址:https://www.cnblogs.com/tynam/p/11037407.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!