js网页滚动条滚动事件实例分析


Posted in Javascript onMay 05, 2015

本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下:

在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll。当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示“返回面部”

js网页滚动条滚动事件

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

例子语法解释

在 style 标签中首先定义 top_div css 属性:position:fixed;display:none; 是关键

javascript 语句中,t 得到滚动条向下滚动的位置,|| 是为了更好兼容性考虑
当滚动超过 300 (像素)时,将 top_div css display 属性设置为显示(inline),反之则隐藏(none)

必须设定 DOCTYPE 类型,在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度

PS:这里再为大家提供一个关于JS事件的在线工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
java必学必会之static关键字
Dec 03 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
JavaScript实现通讯录功能
Dec 27 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 #Javascript
JQuery中Bind()事件用法分析
May 05 #Javascript
JS判断字符串包含的方法
May 05 #Javascript
JS实用的动画弹出层效果实例
May 05 #Javascript
js日期范围初始化得到前一个月日期的方法
May 05 #Javascript
javascript实现捕捉键盘上按下的键
May 05 #Javascript
js中this用法实例详解
May 05 #Javascript
You might like
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php一些公用函数的集合
2008/03/27 PHP
php 抽象类的简单应用
2011/09/06 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
js获取url中指定参数值的示例代码
2013/12/14 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
写给女朋友的道歉信
2014/01/08 职场文书
文科生自我鉴定
2014/02/15 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
推荐信格式要求
2014/05/09 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python