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

最新推荐文章于 2023-07-12 14:41:22 发布

hifhf

最新推荐文章于 2023-07-12 14:41:22 发布

阅读量166

点赞数

文章标签： js javascript css html web

本文链接：https://blog.csdn.net/hifhf/article/details/107311624

版权

测试浏览器：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>