下边代码,是监听滚动条只要移动,下方的返回顶部的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. world特殊控制符输入

    特殊符号的输入表示法. 1,“^l”表示软回车(象这种“↓”). 2,“^p”表示硬回车. 3,“^t”表示制表符. 4,“^m”表示手动分页符. 5,“^+”表示长划线(—). 6,“^=”表示短划 ...

  2. Python爬虫教程-33-scrapy shell 的使用

    本篇详细介绍 scrapy shell 的使用,也介绍了使用 xpath 进行精确查找 Python爬虫教程-33-scrapy shell 的使用 scrapy shell 的使用 条件:我们需要先 ...

  3. switch case 忘记 break

    昨天纠结了很久的问题,一直找不到原因,早上发现是一个低级错误: private void selectButton(int id) { switch (id) { case 0: recommend_ ...

  4. qt 使用qtxlsx 读写excel

    https://github.com/dbzhang800/QtXlsxWriter 下载qtxlsx地址 QtXlsx is a library that can read and write Ex ...

  5. js漂浮广告实现代码(合集经典)

    <html> <head> <title>漂浮广告</title> <body> <div id="codefans_net ...

  6. 020hashlib模块

    #里面内容没有见过,可能会比较难懂,需要找资料.我只是记录了视频中的用法,其他理解的东西,我直接理解,就没有写下来了.下面内容是视频演示过程 import    hashlib m = hashlib ...

  7. IntelliJ IDEA自动补全变量名称和属性名称的快捷键

    自动补全变量名称 : Ctrl + Alt + v 自动补全属性名称 : Ctrl + Alt + f

  8. RabbitMQ Windows环境搭建

    1.0 RabbitMQ是用Erlang语言编写,因此安装RabbitMQ,首先要安装Erlang. Erlang的官网:http://www.erlang.org/ 文件:otp_win64_19. ...

  9. Unity3D Shaderlab 学习记录

    unity3d 定制的表面着色器(Surface Shader)的标准输出结构是这种: struct SurfaceOutput  {  half3 Albedo; //反射率  half3 Norm ...

  10. 10、SpringBoot-CRUD登陆拦截

    1.前端页面的设置 index.html <input type="text" class="form-control" name="usern ...