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实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
javascript实现连续赋值
Aug 10 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
微信小程序 select 下拉框组件功能
Sep 09 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
Vue的Options用法说明
Aug 14 Javascript
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实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JavaScript字符串对象
2017/01/14 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
12步教你理解Python装饰器
2016/02/25 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
类和结构的区别
2012/08/15 面试题
生产内勤岗位职责
2013/12/07 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android