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_p{
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_p = document.getElementById( "top_p" );
if( t >= 300 ) {
top_p.style.display = "inline";
} else {
top_p.style.display = "none";
}
}
</script>
</head>
<body>
<a name="top">顶部<a>
<p id="top_p"><a href="#top">返回顶部</a></p>
<br />
<br />
......
这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去
</body>
</html>例子语法解释
- 在<style>标签中首先定义 top_p css 属性：position:fixed;display:none; 是关键
- javascript 语句中，t 得到滚动条向下滚动的位置，|| 是为了更好兼容性考虑
- 当滚动超过 300 （像素）时，将 top_p css display 属性设置为显示(inline)，反之则隐藏(none)
- 必须设定 DOCTYPE 类型，在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度
本章节内容共分 22 部分：
- JavaScript 事件
- JavaScript onclick 事件：鼠标点击页面某个对象
- JavaScript ondblclick 事件：鼠标双击页面某个对象
- JavaScript onmousedown 事件：鼠标任何一个按键被按下
- JavaScript onmouseup 事件：鼠标任何一个按键被松开
- JavaScript onmouseover 事件与 onmouseout 事件：鼠标指针移动到对象上或离开对象
- JavaScript onkeydown 事件：键盘上某个按键被按下
- JavaScript onkeypress 事件：按下或按住一个键盘按键
- JavaScript onkeyup 事件：键盘按键被松开
- JavaScript onblur 事件：页面元素失去焦点
- JavaScript onfocus 事件：页面元素获得焦点
- JavaScript onchange 事件：表单文本域或选择域发生改变
- JavaScript onsubmit 事件：表单被提交
- JavaScript onreset 事件：表单被重置
- JavaScript onload 事件：页面或图像加载完成后
- JavaScript onunload 事件：关闭页面或页面被改变为其他页面
- JavaScript onerror 事件：加载页面或图像时发生错误
- JavaScript onresize 事件：当浏览器窗口或 HTML 对象改变大小
- JavaScript onscroll 事件：滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果
- JavaScript onselect 事件：文本框中的文本被选中
- JavaScript oncopy 事件：文本被复制及利用 oncopy 实现拷贝内容时增加版权信息
- JavaScript oncut 事件与 onpaste 事件：文本域文本被剪切或粘贴（禁止粘贴实例）
