js监听滚动条 回到顶端
效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来;当滚动条回到顶部时,将回到顶端按钮隐藏。
- <script type="text/javascript">
- //获取滚动条的位置
- function getScrollTop() {
- var scrollPos;
- if (window.pageYOffset)
- {
- scrollPos = window.pageYOffset;
- }
- else if (document.compatMode && document.compatMode != 'BackCompat')
- {
- scrollPos = document.documentElement.scrollTop;
- }
- else if (document.body)
- {
- scrollPos = document.body.scrollTop;
- }
- return scrollPos;
- }
- window.onscroll = function () {//监听滚动条
- if (getScrollTop() > 20) {//当滚动条离开顶端时,显示"回到顶部"。这里写20的原因是,"回到顶端"按钮也不是需要马上出现,根据自己的需求 而设置。
- $("#top_div").show();
- }
- else {//当滚动条回到顶端时,将"回到顶端按钮" 隐藏
- $("#top_div").hide();
- }
- }
- </script>
- <style type="text/css">
- #top_div{
- position: fixed;
right: 10px;
bottom: 10%;
width: 50px;
height: 50px;
display: none;- }
- </style>
小记。。。
js监听滚动条 回到顶端的更多相关文章
- JS监听滚动条进度
HTML部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <s ...
- js监听滚动条事件
(function () { if(document.addEventListener){ document.addEventListener('mousewheel',scrollFunc,fals ...
- 知识点---js监听手机返回键,回到指定界面
方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- 原 JS监听回车事件
原 JS监听回车事件 发表于2年前(2014-06-04 10:16) 阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦 ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- js监听用户的键盘敲击事件,兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
- JS监听组合按键
有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
随机推荐
- Handler没法取出消息队列中的数据的一个原因
主线程发送消息到工作线程,工作线程的步骤是固定为3步的. Looper.prepare();//步骤1,线程里使用handler必须这样写, handler = new Handler(){//步骤2 ...
- 启用nginx status状态详解
nginx和php-fpm一样内建了一个状态页,对于想了解nginx的状态以及监控nginx非常有帮助.为了后续的zabbix监控,我们需要先了解nginx状态页是怎么回事. 1. 启用nginx s ...
- 用二进制方法求两个整数的最大公约数(GCD)
二进制GCD算法基本原理是: 先用移位的方式对两个数除2,直到两个数不同时为偶数.然后将剩下的偶数(如果有的话)做同样的操作,这样做的原因是如果u和v中u为偶数,v为奇数,则有gcd(u,v)=gcd ...
- 使用 getopt() 进行命令行处理
引言 在早期的 UNIX® 中,其命令行环境(当时的唯一用户界面)包含着数十种小的文本处理工具.这些工具非常小,通常可很好地完成一项工作.这些工具通过较长的命令管道链接在一起,前面的程序将其输出传递给 ...
- 一步一步重写 CodeIgniter 框架 (6) —— 实现在控制器Controller中加载View
1. 控制器将模型类获得的数据,传递给视图进行显示,所以视图必须负责接收数据,另外重要的一点是当模型和视图分开后,多个模型的数据可以传递给一个视图进行展示,也可以说一个模型的数据在多个不同的视图中进行 ...
- C: 函数的名字是否受大小写影响?
函数的名字大小写是否为同一函数? 不是,大小写不同,函数不同. 环境: gcc 版本 4.6.3 (Ubuntu/Linaro 4.6.3-1ubuntu5) Linux ubuntu 3.2.0-2 ...
- 我的Python成长之路---第一天---Python基础(6)---2015年12月26日(雾霾)
七.列表——list Python的列表是一种内置的数据类型,是由Python的基本数据类型组成的有序的集合.有点类似C语言的数组,但与数组不同的是,Python在定义列表的时候不用指定列表的容积(长 ...
- IO操作之使用zip包压缩和解压缩文件
转自:http://www.cdtarena.com/java.htmlJava API中的import java.util.zip.*;包下包含了Java对于压缩文件的所有相关操作. 我们可以使 ...
- opencv开源库
opencv是开源库 在Windows下编译扩展OpenCV 3.1.0 + opencv_contrib 为什么要CMake,这里我陈述自己的想法,作为一个刚使用opencv库的小白来说,有以下大概 ...
- 高级特性(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 获得图像文件类型的读取器 ...