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浏览器兼容一章节。

回复

我来回复
  • 暂无回复内容