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>
