腾讯云618限量抢购

JavaScript onscroll 事件:滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果

最后更新:2012-05-19 13:10阅读:55331

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>

例子语法解释

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

本章节内容共分 22 部分:
  1. 1. JavaScript 事件
  2. 2. JavaScript onclick 事件:鼠标点击页面某个对象
  3. 3. JavaScript ondblclick 事件:鼠标双击页面某个对象
  4. 4. JavaScript onmousedown 事件:鼠标任何一个按键被按下
  5. 5. JavaScript onmouseup 事件:鼠标任何一个按键被松开
  6. 6. JavaScript onmouseover 事件与 onmouseout 事件:鼠标指针移动到对象上或离开对象
  7. 7. JavaScript onkeydown 事件:键盘上某个按键被按下
  8. 8. JavaScript onkeypress 事件:按下或按住一个键盘按键
  9. 9. JavaScript onkeyup 事件:键盘按键被松开
  10. 10. JavaScript onblur 事件:页面元素失去焦点
  11. 11. JavaScript onfocus 事件:页面元素获得焦点
  12. 12. JavaScript onchange 事件:表单文本域或选择域发生改变
  13. 13. JavaScript onsubmit 事件:表单被提交
  14. 14. JavaScript onreset 事件:表单被重置
  15. 15. JavaScript onload 事件:页面或图像加载完成后
  16. 16. JavaScript onunload 事件:关闭页面或页面被改变为其他页面
  17. 17. JavaScript onerror 事件:加载页面或图像时发生错误
  18. 18. JavaScript onresize 事件:当浏览器窗口或 HTML 对象改变大小
  19. 19. JavaScript onscroll 事件:滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果
  20. 20. JavaScript onselect 事件:文本框中的文本被选中
  21. 21. JavaScript oncopy 事件:文本被复制及利用 oncopy 实现拷贝内容时增加版权信息
  22. 22. JavaScript oncut 事件与 onpaste 事件:文本域文本被剪切或粘贴(禁止粘贴实例)
腾讯云618限量抢购