JS实现页面回到顶部效果

【代码】

 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>

 

posted @ 2015-09-13 21:05  淳安梁朝伟  阅读(1056)  评论(0编辑  收藏  举报