<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>Javascript 返回顶部</title><style type="text/css">#btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;}#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}.bg {width:1190px; margin:0 auto;border:#F00 solid 8px; }</style></head><body><div><img src="images/tb_bg.jpg" alt="hfh" /></div> <a href="javascript:;" id="btn" title="回到顶部"></a> <script type="text/javascript"> window.onload=function(){ ///就是等html页面内容加载完成，后在进行加载，以便获取页面中的图片和元素 var abtn=document.getElementById("btn"); ///得到元素 var timer=null; //var returntop=true; var clientHeight=document.documentElement.clientHeight;//获取页面第一版的可视高度 使用 alert(clientHeight);894可以获取可视页面高度 abtn.onscroll=function(){ ///滚动条滚动时触发 var returntop=document.documentElement.scrollTop||document.body.scrollTop;if(returntop>=clientHeight){abtn.style.display="block";//不显示啊}else{abtn.style.display="none";}//if(!returntop)// {// clearInterval(timer);// }// returntop=false; } abtn.onclick=function(){ timer=setInterval(function(){ var returntop=document.documentElement.scrollTop||document.body.scrollTop; ///浏览器的兼容 // document.documentElement.scrollTop=document.body.scrollTop-=50; //就是每次向上移动200px ，，如果只要简单的话，这样就可以了 var speed=returntop /5 //将每次的距离底部的距离一次document.documentElement.scrollTop=document.body.scrollTop=returntop - speed; if(returntop==7) { clearInterval(timer); } },60) } }</script></body></html>
添加回答
举报
0/150
提交
取消