自动识别窗口高度并显示返回顶部按钮-JS特效-爱易网页

自动识别窗口高度并显示返回顶部按钮

日期：2014-05-18　浏览次数：20186 次

以下是程序代码

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>返回顶部按钮</title>
  
<style type="text/css">
body{
 font:12px Verdana, Geneva, sans-serif;
 line-height:1.2;
 text-align:center;
}
#gotopbtn {
 width:100px;
 height:30px;
 background:#fff;
 position:fixed;
 bottom:100px;
 right:20px;
 display:none;
 cursor:pointer;
 font-size:14px;
 line-height:30px;
}
.main{
 width:100%;
 height:1500px;
 background:blue;
 margin:0 auto;
}
</style>
</head>
<body>
<div class="main"></div>
<div id="gotopbtn">返回顶部</div>
<script type="text/javascript">
 idTest=document.getElementById('gotopbtn');
 idTest.onclick=function (){
  document.documentElement.scrollTop=0;
  sb();
  }
 window.onscroll=sb;
 function sb(){
  if(document.documentElement.scrollTop==0){
   idTest.style.display="none";
   }else{
    idTest.style.display="block";
    }
  }
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]