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 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 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 工厂模式使用方法
2010/05/18 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JS Loading功能的简单实现
2013/11/29 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python+Wordpress制作小说站
2017/04/14 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
PyQt5每天必学之组合框
2018/04/20 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
python SVD压缩图像的实现代码
2019/11/05 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
小学生感恩演讲稿
2014/04/25 职场文书
法定代表人授权委托书
2014/09/19 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫