【代码】
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>home</title>
6 </head>
7 <style>
8 *{
9 padding:0;
10 margin:0;
11 }
12 .box{
13 width:1190px; /*只有设置了宽度才能设置居中效果*/
14 margin:0 auto; /*设置居中*/
15 }
16 #btn{
17 display: none; /*按钮默认不显示*/
18 width:40px;
19 height:40px;
20 position:fixed; /*设置为固定定位*/
21 left:50%;
22 margin-left:610px;
23 bottom: 30px;
24 background:url("btn.png") no-repeat 0 0; /*通过sprite来设置背景*/
25 }
26 #btn:hover{
27 background:url("btn.png") no-repeat 0 -39px;
28 }
29 </style>
30 <body>
31 <div class="box">
32 <img src="img1.jpg" alt="">
33 </div>
34 <a id="btn" href="javascript:;"></a>
35 </body>
36
37 <script>
38 // 当页面加载完成后执行
39 window.onload = function(){
40 var obtn = document.getElementById("btn");
41 var clientHeight = document.documentElement.clientHeight; //获取用户页面可视窗口的高度
42 var timer = null;
43 var isTop = true;
44
45 //滚动条滚动时触发
46 window.onscroll = function(){
47
48 var osTop = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动条当前位置距离顶部的距离
49
50 if(osTop >= clientHeight){ //当页面进入第二屏时显示按钮
51 obtn.style.display = "block";
52 }else{
53 obtn.style.display = "none";
54 }
55
56 if(!isTop){ //若滚动条未到达顶部则继续执行定时器
57 clearInterval(timer);
58 }
59 isTop = false;
60 }
61
62 obtn.onclick = function(){
63 timer = setInterval(function(){
64 var osTop = document.documentElement.scrollTop || document.body.scrollTop;
65 var ispeed = Math.floor(-osTop/6); //使向上滚动呈现渐变效果
66 document.documentElement.scrollTop = document.body.scrollTop = (osTop+ispeed);
67 isTop = true;
68
69 if(soTop == 0){ //如果滚动条已经到达浏览器顶部则暂定滚动
70 clearInterval(timer);
71 }
72 },30)
73 }
74 }
75 </script>
76 </html>
时间： 2024-08-06 10:47:09