关于如何使用javascript监听滚动条滚动事件

在网页中,通常有一个通往网页顶部的锚点,现在我们就来实现它

关于如何使用javascript监听滚动条滚动事件

Html代码:

<a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a>

Css代码:

#scrollup{
background: #777;
color:#eee;
font-size: 40px;
text-align: center;
text-decoration: none;
bottom:65px;
right:20px;
overflow: hidden;
width:46px;
height:46px;
border:none;
}

以上就是箭头所指按钮的样式啦,接下是实现滚动条监听事件~

javascript代码:

<script type="text/javascript">
  window.onscroll= function(){
  //变量t是滚动条滚动时,距离顶部的距离
var t = document.documentElement.scrollTop||document.body.scrollTop;
var scrollup = document.getElementById('scrollup');
//当滚动到距离顶部200px时,返回顶部的锚点显示
if(t>=200){
scrollup.style.display="block";
}else{ //恢复正常
scrollup.style.display="none";
}
}
</script>
上一篇:jq监听页面的滚动事件,


下一篇:zookeeper的三种安装模式