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

1
2
3
4
5
6
7
8
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隐藏

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

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

补充:

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

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

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

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

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

javascript事件与功能说明大全:

http://tools.jb51.net/table/javascript_event

js滚动监听的更多相关文章

  1. Bootstrap入门(二十六)JS插件3:滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

  2. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  3. bootstrap源码之滚动监听组件scrollspy.js详解

    其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...

  4. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

  5. 滚动监听(bootstrap)

    1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...

  6. Bootstrap滚动监听

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...

  7. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  8. Bootstrap 下拉菜单和滚动监听插件

    一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  9. bootstrap的滚动监听

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

随机推荐

  1. Git学习-Git配置(一)

    零.前言 Git是一个工具,就没必要把时间浪费在那些"高级"但几乎永远不会用到的命令上.一旦你真的非用不可了,到时候再自行Google或者请教专家也未迟. 如果你是一个开发人员,想 ...

  2. SQL Server ->> Database Promgramming Object Security Control(数据库编程对象安全控制)

    对于SQL Server内编程对象的安全控制是今天我在思考的问题.在MSDN上找到了几篇有用的文章. 首先微软推荐了三种做法: 1)第一种做法是在SQL Server中对一个应用程序对应创建应用程序角 ...

  3. 在IE浏览器输入测试servlet程序报:HTTP Status 404(The requested resource is not available)错

    一.HTTP Status 404(The requested resource is not available)异常主要是路径错误或拼写错误造成的,请按以下步骤逐一排查: 1.未部署Web应用 2 ...

  4. ignore_user_abort函数制定计划任务

    PHP中的ignore_user_abort函数是当用户关掉终端后脚本不停止仍然在执行,可以用它来实现计划任务与持续进程,下面会通过实例讨论ignore_user_abort()函数的作用与用法.   ...

  5. backtrack渗透测试中常用的命令总结

    ping 域名/ip 测试本机到远端主机是否联通. dig 域名/ip 查看域名解析的详细信息. host -l 域名 dns服务器 传输zone. 扫描 nmap: -sS 半开扫描TCP和SYN扫 ...

  6. CopyOnWriteArrayList对比ArrayList

    ArrayList非线程安全,CopyOnWriteArrayList线程安全 ArrayList添加元素的时候内部会预先分配存储空间,CopyOnWriteArrayList每次添加元素都会重新co ...

  7. mongodb启动和关闭

    mongodb的启动 mongod --dbpath=/data/mongodb/data --logpath=/data/mongodb/log/33988.log --port 33988 --f ...

  8. excel 在web导入到数据库的操作方法

    这个操作的大致步骤是把本地文件存入到服务器端,然后再读取服务端的文件并且使用NPOI这个第三方的插件去读取文件导入到数据库批量插入需要注意的是,前端需要使用form包裹type=file的文件标签,并 ...

  9. 关于HiddenHttpMethodFilter

    这个类的代码比较少,所以把整个类的代码都复制过来.在注释中添加上自己的理解. public class HiddenHttpMethodFilter extends OncePerRequestFil ...

  10. Linux修改权限命令chmod用法详解

    Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...