下边代码,是监听滚动条只要移动,下方的返回顶部的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. 【Markdown】Markdown 使用MathJax引擎 书写Latex 数学公式

    大家都看过Stackoverflow上的公式吧,漂亮,其生成的不是图片.这就要用到MathJax引擎,在Markdown中添加MathJax引擎也很简单, <script type=" ...

  2. Netty相关面试题

    1.BIO.NIO和AIO的区别? BIO:一个连接一个线程,客户端有连接请求时服务器端就需要启动一个线程进行处理.线程开销大. 伪异步IO:将请求连接放入线程池,一对多,但线程还是很宝贵的资源. N ...

  3. LeetCode总结 -- 一维动态规划篇

    这篇文章的主题是动态规划, 主要介绍LeetCode中一维动态规划的题目, 列表如下: Climbing StairsDecode WaysUnique Binary Search TreesMaxi ...

  4. Java学习笔记——关于位运算符的问题

    我就之直接贴图了!不想排版了! 有什么问题,欢迎大家指出,帮助我提高,谢谢!

  5. client、offset、scroll系列

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  6. memcached安装及.NET中的Memcached.ClientLibrary使用

    一.安装服务端: 服务端:http://code.jellycan.com/files/memcached-1.2.6-win32-bin.zip 64:http://blog.couchbase.c ...

  7. calcurse 日程管理软件

    包括有命令行与界面操作两部分: 命令行操作: 1.显示所有的 appointment and events root@zsf:/etc# calcurse -a09/15/13: - 21:35 -& ...

  8. GPU 与CPU的作用协调,工作流程、GPU整合到CPU得好处

    http://blog.csdn.net/maopig/article/details/6803141 在不少人的心目中,显卡最大的用途可能就只有两点——玩游戏.看电影,除此之外,GPU并没有其他的作 ...

  9. CF739B Alyona and a tree

    嘟嘟嘟 前缀和+倍增+树上差分 假设\(v\)是\(u\)子树中的一个点,那么\(u\)能控制\(v\)的条件是受\(v\)的权值的限制,而并非\(u\).因此我们就能想到计算每一个点的贡献,即\(v ...

  10. 让Git不再难学

    写在前面 在团队做过软件开发的,版本控制必是不可或缺的一项.目前,版本控制主要分为集中式版本控制系统和分布式版本控制系统 ,即大家熟知的SVN和Git.Git是当下最流行的分布式版本控制系统,故,今天 ...