JavaScript onscroll 事件：滚动条发生滚动及利用 onscroll 来实现返回顶部效果_JavaScript基础教程

JavaScript onscroll 事件

当浏览器滚动条滚动时会触发 onscroll 事件，通常情况下指上下滚动条滚动。

需要注意的是，浏览器一旦检测到滚动条发生滚动，就可以触发 onscroll 事件，而无需等到滚动行为结束。

onscroll 实例

下面的例子演示了一个极普遍的应用：利用 onscroll 事件检测滚动条位置，当向下滚动到一定位置时，在页面右下角会出现“返回顶部”的锚链接，以方便网站用户快速返回顶部。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-str
ict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#top_div{
    position:fixed;
    bottom:80px;
    right:0;
    display:none;
}
</style>

<script type="text/javascript">

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>
<a name="top">顶部<a>
<div id="top_div"><a href="#top">返回顶部</a></div>
<br />
<br />
......
这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去
</body>
</html>

例子语法解释

在<style>标签中首先定义 top_div css 属性：position:fixed;display:none; 是关键
javascript 语句中，t 得到滚动条向下滚动的位置，|| 是为了更好兼容性考虑
当滚动超过 300 （像素）时，将 top_div css display 属性设置为显示(inline)，反之则隐藏(none)
必须设定 DOCTYPE 类型，在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度