为啥超过设定高度不显示;

<!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>


qq_萝卜与白菜_0
浏览 1208回答 1
1回答

咕咕问

<a href="javascript:;" id="btn" title="回到顶部">    回到顶部                             //这里加个回到顶部</a>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript