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

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

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

以下是程序代码

<!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 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

新浪微博推粉丝头条功能意欲与大号分成

小米2S试水高端化纯“性价比”玩法已成过去式

高德百度地图免费背后：李彦宏暗斗马云周鸿祎

屌丝程序猿发家机会来了用大数据来做生意！

广电地方营业厅的一句“罚停”，暴露出了他们的本质

盘点改变社会的15种科技：谷歌眼镜将使我们成为半机械人

诺基亚仍是第二大手机商：功用机有利可图

百度对糯米来说到底意味着什么？

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

相关资料更多>

推荐阅读更多>