效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来;当滚动条回到顶部时,将回到顶端按钮隐藏。

  1. <script type="text/javascript">
  2.      //获取滚动条的位置
  3. function getScrollTop() {
  4. var scrollPos;
  5. if (window.pageYOffset)
  6. {
  7. scrollPos = window.pageYOffset;
  8. }
  9. else if (document.compatMode && document.compatMode != 'BackCompat')
  10. {
  11. scrollPos = document.documentElement.scrollTop;
  12. }
  13. else if (document.body)
  14. {
  15. scrollPos = document.body.scrollTop;
  16. }
  17. return scrollPos;
  18. }
  19.  
  20. window.onscroll = function () {//监听滚动条
  21. if (getScrollTop() > 20) {//当滚动条离开顶端时,显示"回到顶部"。这里写20的原因是,"回到顶端"按钮也不是需要马上出现,根据自己的需求 而设置。
  22. $("#top_div").show();
  23. }
  24. else {//当滚动条回到顶端时,将"回到顶端按钮" 隐藏
  25. $("#top_div").hide();
  26. }
  27. }
  28. </script>
  29.  
  30. <style type="text/css">
  31. #top_div{
  32.  position: fixed;
       right: 10px;
       bottom: 10%;
       width: 50px;
       height: 50px;
       display: none;
  33. }
  34. </style>

小记。。。

js监听滚动条 回到顶端的更多相关文章

  1. JS监听滚动条进度

    HTML部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <s ...

  2. js监听滚动条事件

    (function () { if(document.addEventListener){ document.addEventListener('mousewheel',scrollFunc,fals ...

  3. 知识点---js监听手机返回键,回到指定界面

    方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...

  4. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  5. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  6. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  7. js监听用户的键盘敲击事件,兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  8. JS监听组合按键

    有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...

  9. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

随机推荐

  1. Handler没法取出消息队列中的数据的一个原因

    主线程发送消息到工作线程,工作线程的步骤是固定为3步的. Looper.prepare();//步骤1,线程里使用handler必须这样写, handler = new Handler(){//步骤2 ...

  2. 启用nginx status状态详解

    nginx和php-fpm一样内建了一个状态页,对于想了解nginx的状态以及监控nginx非常有帮助.为了后续的zabbix监控,我们需要先了解nginx状态页是怎么回事. 1. 启用nginx s ...

  3. 用二进制方法求两个整数的最大公约数(GCD)

    二进制GCD算法基本原理是: 先用移位的方式对两个数除2,直到两个数不同时为偶数.然后将剩下的偶数(如果有的话)做同样的操作,这样做的原因是如果u和v中u为偶数,v为奇数,则有gcd(u,v)=gcd ...

  4. 使用 getopt() 进行命令行处理

    引言 在早期的 UNIX® 中,其命令行环境(当时的唯一用户界面)包含着数十种小的文本处理工具.这些工具非常小,通常可很好地完成一项工作.这些工具通过较长的命令管道链接在一起,前面的程序将其输出传递给 ...

  5. 一步一步重写 CodeIgniter 框架 (6) —— 实现在控制器Controller中加载View

    1. 控制器将模型类获得的数据,传递给视图进行显示,所以视图必须负责接收数据,另外重要的一点是当模型和视图分开后,多个模型的数据可以传递给一个视图进行展示,也可以说一个模型的数据在多个不同的视图中进行 ...

  6. C: 函数的名字是否受大小写影响?

    函数的名字大小写是否为同一函数? 不是,大小写不同,函数不同. 环境: gcc 版本 4.6.3 (Ubuntu/Linaro 4.6.3-1ubuntu5) Linux ubuntu 3.2.0-2 ...

  7. 我的Python成长之路---第一天---Python基础(6)---2015年12月26日(雾霾)

    七.列表——list Python的列表是一种内置的数据类型,是由Python的基本数据类型组成的有序的集合.有点类似C语言的数组,但与数组不同的是,Python在定义列表的时候不用指定列表的容积(长 ...

  8. IO操作之使用zip包压缩和解压缩文件

    转自:http://www.cdtarena.com/java.html​​Java API中的import java.util.zip.*;包下包含了Java对于压缩文件的所有相关操作. 我们可以使 ...

  9. opencv开源库

    opencv是开源库 在Windows下编译扩展OpenCV 3.1.0 + opencv_contrib 为什么要CMake,这里我陈述自己的想法,作为一个刚使用opencv库的小白来说,有以下大概 ...

  10. 高级特性(7)- 高级AWT

    7.1 绘图操作流程7.2 形状7.3 区域7.4 笔划7.5 着色7.6 坐标变换7.7 剪切7.8 透明与组合7.9 绘图提示7.10 图像的读取器和写入器 7.10.1 获得图像文件类型的读取器 ...