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的话是无法监听到输入法输入的文本变 ...
随机推荐
- application(CURD)--easyui
一,效果图. 二,源代码. <!DOCTYPE html><html><head> <meta charset="UTF-8"> & ...
- ssh "openssh-daemon is stopped"操作之伤+sftp访问“-bash: /dev/null: Permission denied”
1.ssh "openssh-daemon is stopped"操作之伤 原来好好的 sshd服务突然发现 不能重新启动了: [root@bogon rules.d]# ser ...
- mysql中if语句
#1.IF表达式 IF(condition,expr1,expr2) //如果condition成立返回expr1,否则返回expr2 #2.IFNULL表达式 IFNULL(expr1,expr2) ...
- CGroup 介绍、应用实例及原理描述
CGroup 介绍 CGroup 是 Control Groups 的缩写,是 Linux 内核提供的一种可以限制.记录.隔离进程组 (process groups) 所使用的物力资源 (如 cpu ...
- USACO Longest Prefix 【水】
用Dp的思想解决了这道题目,也就是所谓的暴力= = 题意:给出一个集合,一个字符串,找出这个字符串的最长前缀,使得前缀可以划分为这个集合中的元素(集合中的元素可以不全部使用). 还不会Trie 树QA ...
- Hdu 1404 Digital Deletions
Problem地址:http://acm.hdu.edu.cn/showproblem.php?pid=1404 刚开始想采取找规律的方法解题,可以没有发现规律.无奈,只好采用求PN点的方法. 我们假 ...
- c# 课堂总结6 --集合与结构体
一.集合 使用时必须添加 System.Collections 集合与数组的区别: 1:数组声明了它容纳的元素的类型,而集合不声明.这是由于集合以object形式来存储它们的元素.初始化时集合无需定义 ...
- 算法之旅,直奔<algorithm>之十 count_if
count_if(vs2010) 引言 这是我学习总结<algorithm>的第十篇,这个重要的地方是设置条件.用的还是蛮多的.(今天下午挺恶心的,一下午就做一个面试题,调代码调傻了... ...
- Python 第一篇:python简介和入门
一.python简介 1.python下载地址:https://www.python.org/downloads/ Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆 ...
- javascript笔记整理(事件)
一.事件驱动 1.事件javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2.事件源引发事件的元素(发生在谁的身上) 3.事件处理程序对事件处理的程序或是函数 (发生了什么事) 二 ...