下边代码,是监听滚动条只要移动,下方的返回顶部的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. 音乐播放插件Aplayer+WebAPI的使用【附下载】

    本次介绍的是音乐播放器APlayer结合WebAPI的使用,先给各位看下效果:   上面就是APlayer的效果,然后这插件的地址是 https://github.com/DIYgod/APlayer ...

  2. 深入解读TPC-C指标

    深入解读TPC-C指标 TPC(Transactionprocessing Performance Council,事务处理性能委员会)是由数十家会员公司创建的非盈利组织,总部设在美国.TPC的成员主 ...

  3. Access 64-bit HKLM\Software Registry by 32-bit C#.NET Application

    http://www.codeproject.com/Articles/1003177/Access-bit-HKLM-Software-Registry-by-bit-Csharp-NE While ...

  4. Python学习---Python下[列表]的学习

    列表[list]用中括号[]表示,处理一组有序项目的数据结构,列表的类型是可变的数据类型,类型是list 列表是可变/线程不安全的 # type(a) = list  利用type判断元素离线 # 切 ...

  5. centos无法用password登录,只能用public key的解决办法

    如上图只能用public key登录,只是我在17年申请的阿里云免费体验半年的服务器上遇到的, 那么我们用阿里云后台的远程连接按钮进入服务器,进入后 就看/etc/ssh/sshd_config文件配 ...

  6. U-Mail邮件群发如何过滤无效地址?

    U-Mail邮件群发平台可以自动过滤掉无效和重复地址,过滤效果如下图 U-Mail邮件群发平台会将客户已经确认好是无效地址的加入无效地址库,下次再导入改无效地址就直接拒绝.邮件格式不正确的也会直接过滤 ...

  7. 使用combineReducers注意事项

    一.从‘redux’包中引入combineReducers方法: import { combineReducers } from 'redux'; 二.针对state的不同属性写不同的reducer, ...

  8. 【C++】随机重命名MP3文件

    新置MP3一件,竟然没有随机播放的功能.坑啊!身为程序媛一枚,自己动手吧~ 获取当前路径: char buf[1000]; GetCurrentDirectory(1000,buf); string ...

  9. luogu P3941 入阵曲

    嘟嘟嘟 这道题我觉得跟最大子矩阵那道题非常像,都是O(n4)二维前缀和暴力很好想,O(n3)正解需要点转化. O(n4)暴力就不说啦,二维前缀和,枚举所有矩形,应该能得55分. O(n3)需要用到降维 ...

  10. [19/04/01-星期一] IO技术_字节流分类总结(含字节数组(Array)流、字节数据(Data)流、字节对象(Object)流)

    一.字节流分类概括 -->1.ByteArrayInputStream /ByteArrayOutputStream(数组字节输入输出)        InputStream/OutputStr ...