jQuery-使页面回到顶部
程序员文章站
2022-04-10 21:17: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>
结果