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 操作表格实现代码(多种操作打包)
Mar 20 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
Vue面试题及Vue知识点整理
Oct 07 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
javascript实现倒计时关闭广告
Feb 09 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
Zend Framework路由器用法实例详解
2016/12/11 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
浅析Javascript使用include/require
2013/11/13 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
在Python中使用__slots__方法的详细教程
2015/04/28 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python中的heapq模块源码详析
2019/01/08 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Python 列表的清空方式
2020/01/13 Python
python实现低通滤波器代码
2020/02/26 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
家长评语和期望
2014/02/10 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
法律七进实施方案
2014/03/15 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
《小小的船》教学反思
2016/02/18 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python