22
2018
05

【教程】网页到达底部显示返回顶部一:原生JavaScript方法

测试浏览器:IE8,chrome

js代码

//滚动条在Y轴上的滚动距离
function getScrollTop(){
  var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  if(document.body){
    bodyScrollTop = document.body.scrollTop;
  }
  if(document.documentElement){
    documentScrollTop = document.documentElement.scrollTop;
  }
  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  return scrollTop;
}

//文档的总高度

function getScrollHeight(){
  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  if(document.body){
    bodyScrollHeight = document.body.scrollHeight;
  }
  if(document.documentElement){
    documentScrollHeight = document.documentElement.scrollHeight;
  }
  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  return scrollHeight;
}

//浏览器视口的高度

function getWindowHeight(){
  var windowHeight = 0;
  if(document.compatMode == "CSS1Compat"){
    windowHeight = document.documentElement.clientHeight;
  }else{
    windowHeight = document.body.clientHeight;
  }
  return windowHeight;
}

window.onscroll = function(){
  if(getScrollTop() + getWindowHeight() == getScrollHeight()){
    //alert("you are in the bottom!");
		document.getElementById('b2').style.display='block';
  }
	else{
		document.getElementById('b2').style.display='none';
	}
	
};

html代码

top<a id="b1">
<div style="height:1400px;"></div>
bottom
<div id="b3" style="position:fixed;top:780px;left:1700px;">联系我们</div>
<div id="b2" style="display:none;position:fixed;top:800px;left:1700px;"><a href="#b1">返回顶部</a></div>


打赏
« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。