saber 酱的抱枕

Fly me to the moon

04/24
2015
学习

使用js制作一个返回顶部按钮

使用js制作了一个返回顶部按钮,使用了获取网页可视高度的方法,代码如下:

<div id="goTop">TOP</div>
<style type="text/css">
body{height: 3000px;}
	#goTop{width: 50px;height: 50px;right: 12%;bottom: 5%;position: fixed;display: none;background: #05E28E;text-align: center;line-height: 50px;color: #fff;border-radius: 10px;cursor: pointer;}
</style>
<script type="text/javascript">
	var topButton=document.getElementById("goTop");
	window.onscroll=function  () {
		var scrollH=document.documentElement.scrollTop || document.body.scrollTop;
		if (scrollH>0) {
			topButton.style.display="block";
		}else{
			topButton.style.display="none";
		};
	}
	topButton.onclick=function(){
		document.body.scrollTop=0;
		document.documentElement.scrollTop=0;
	}
</script>

使用js制作一个返回顶部按钮