js向下滚动一段距离出现返回顶部按钮
分类：实例代码
很多返回顶部效果代码，并不是一开始就显示返回顶部的按钮，而是在下拉滚动一定距离之后才会显示。
下面就通过代码实例介绍一下如何实现此功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
*{
margin:0px;
padding:0px;
}
#top_div{
position:fixed;
bottom:80px;
right:0;
display:none;
}
#antzone{
width:20px;
height:1500px;
margin:0px auto;
background:green;
}
</style>
<script>
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top_div = document.getElementById( "top_div" );
if( t >= 300 ) {
top_div.style.display = "inline";
} else {
top_div.style.display = "none";
}
}
</script>
</head>
<body>
<div id="top_div">
<a href="#top">返回顶部</a>
</div>
<div id="antzone"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onscroll = function(){ }，注册onscroll事件处理函数，也就是当滚动滚动条的时候会触发此事件。
（2）.var t = document.documentElement.scrollTop || document.body.scrollTop,获取向上滚动的尺寸。
（3）.var top_div = document.getElementById( "top_div" ),获取指定的元素对象。
（4）.if( t >= 300 ) {
top_div.style.display = "inline";
} else {
top_div.style.display = "none";
},如果尺寸大于等于300，那么就显示返回顶部按钮，否则隐藏。
二.相关阅读:
（1）.onscroll事件可以参阅javascript scroll事件一章节。
（2）.document.documentElement.scrollTop || document.body.scrollTop可以参阅document.documentElement.scrollTop浏览器兼容一章节。