js操作滚动条事件实例


Posted in Javascript onJanuary 29, 2015

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

之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了。

下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码

window.onscroll = function () { 
 var t = document.documentElement.scrollTop || document.body.scrollTop;
 if (t > 0) { 
 $(".cbbfixed").css("bottom", "10px"); 
 } else { 
 $(".cbbfixed").css("bottom", "-85px"); 
 } 
}

注:

t:滚动条距离top端的距离

t>0,即滚动条一旦滚动,立即执行if()语句,else()中的代码是,滚动条到到top处时,返回顶部的div隐藏

返回顶部按钮的点击操作:

$("#cgotop").click(function(){ 
 $('body,html').animate({ scrollTop: 0 }, 100); 
 return false; 
});

补充:

1、监听某个元素的滚动条事件

$(selector).scroll(function(){.......});

 
2.获取滚动条滚动的距离

$(selector).scrollTop();
$(selector).scrollLefft();

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

javascript事件与功能说明大全:

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

Javascript 相关文章推荐
读jQuery之一(对象的组成)
Jun 11 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
jQuery调取jSon数据并展示的方法
Jan 29 #Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 #Javascript
浅谈Javascript 数组与字典
Jan 29 #Javascript
javascript 数组操作详解
Jan 29 #Javascript
jQuery实现流动虚线框的方法
Jan 29 #Javascript
jquery 设置style:display的方法
Jan 29 #Javascript
jQuery获取样式中颜色值的方法
Jan 29 #Javascript
You might like
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
Javascript 继承机制实例
2009/08/12 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jquery等待效果示例
2014/05/01 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python3.x实现base64加密和解密
2019/03/28 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python中的&&及||的实现示例
2019/08/07 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
师范毕业生自荐信
2013/10/17 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
爱心活动计划书
2014/04/26 职场文书
贷款担保书范文
2014/05/13 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
2014年减负工作总结
2014/12/10 职场文书
Flink 侧流输出源码示例解析
2022/09/23 Servers