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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jquery随机展示头像代码
Dec 21 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
原生JS实现相邻月份日历
Oct 13 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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
新52大事件
2020/03/03 欧美动漫
如何使用PHP往windows中添加用户
2006/12/06 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
Python ZipFile模块详解
2013/11/01 Python
深入浅析Python字符编码
2015/11/12 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python Django的web开发实例(入门)
2019/07/31 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
医生自荐信
2013/10/11 职场文书
大学生四年生活自我鉴定
2013/11/21 职场文书
小学教师培训感言
2014/02/11 职场文书
初中学校军训方案
2014/05/09 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
对PyTorch中inplace字段的全面理解
2021/05/22 Python
新手初学Java网络编程
2021/07/07 Java/Android
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS