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的话是无法监听到输入法输入的文本变 ...
随机推荐
- Eclipse开启与关闭代码自动提示功能
Eclipse代码里面的代码提示功能默认是关闭的,只有输入“.”的时候才会提示功能,用vs的用户可能不太习惯 这种,vs是输入任何字母都会提示,下面说一下如何修改eclipse配置,开启代码自 ...
- Python之路Day10
本节主要内容:memcache&redis.RabbitMQ.twisted框架 1. memcache&redis 1.1 memcache Memcached 是一个高性能的分布式 ...
- C++ cout 如何保留小数输出
参考 : http://upliu.net/how-cout-out-2-precision.html 大家都知道用 C 语言中 printf () 函数可以非常方便控制保留 几位小数输出 不过在 C ...
- SolrCloud Hello Word
Solr Cloud 设计出来的目的是使你的搜索服务具有更高的可用性,提高容错.容灾能力.下面我们在一台电脑上建立2个solr服务,作为一个solrCloud分片(shard),初步认识一下solrC ...
- [置顶] Android4.x对长按电源键(挂断键)和短按电源键(挂断键)的详细处理流程
1. 简介 Android4.x在Framework的PhoneWindowManager对Power(KeyEvent.KEYCODE_POWER)和Home(KeyEvent.KEYCODE_HO ...
- UVA1452|LA4727-----Jump------经典的约瑟夫公式的变形(DP)
本文出自:http://blog.csdn.net/dr5459 题目地址: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&a ...
- Cocos2d-x 3.0final手机游戏开发视频教程2014 - 自学编程 -(陆续更新中)
内容: 非常多人问我:沈老师,要不要更新引擎版本号到3.0,更新这么快,以后会不会每一个月都有一次,好怕呀. 我说:无论你曾经是哪个版本号,3.0final是一个架构级别的升级,能够在新项目中果断升级 ...
- Android学习笔记之View(一):LayoutInflater
使用LayoutInflater加载布局的两种方式: 第一种: LayoutInflater inflater=LayoutInflater.from(context); inflater.infla ...
- WCF技术剖析之二十七: 如何将一个服务发布成WSDL[基于HTTP-GET的实现](提供模拟程序)
原文:WCF技术剖析之二十七: 如何将一个服务发布成WSDL[基于HTTP-GET的实现](提供模拟程序) 基于HTTP-GET的元数据发布方式与基于WS-MEX原理类似,但是ServiceMetad ...
- [HDU 1358]Period[kmp求周期]
题意: 每一个power前缀的周期数(>1). 思路: kmp的next. 每一个前缀都询问一遍. #include <cstring> #include <cstdio> ...