jQuery-使页面回到顶部

最新推荐文章于 2022-07-23 13:33:31 发布

diaoweisang7683

最新推荐文章于 2022-07-23 13:33:31 发布

阅读量95

点赞数

文章标签： javascript ViewUI

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

版权

 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>

结果

转载于:https://www.cnblogs.com/tynam/p/11037407.html

diaoweisang7683

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-使页面回到顶部

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&g...
复制链接

扫一扫