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

    <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监听滚动条 回到顶端的更多相关文章

  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. Eclipse开启与关闭代码自动提示功能

        Eclipse代码里面的代码提示功能默认是关闭的,只有输入“.”的时候才会提示功能,用vs的用户可能不太习惯 这种,vs是输入任何字母都会提示,下面说一下如何修改eclipse配置,开启代码自 ...

  2. Python之路Day10

    本节主要内容:memcache&redis.RabbitMQ.twisted框架 1. memcache&redis 1.1 memcache Memcached 是一个高性能的分布式 ...

  3. C++ cout 如何保留小数输出

    参考 : http://upliu.net/how-cout-out-2-precision.html 大家都知道用 C 语言中 printf () 函数可以非常方便控制保留 几位小数输出 不过在 C ...

  4. SolrCloud Hello Word

    Solr Cloud 设计出来的目的是使你的搜索服务具有更高的可用性,提高容错.容灾能力.下面我们在一台电脑上建立2个solr服务,作为一个solrCloud分片(shard),初步认识一下solrC ...

  5. [置顶] Android4.x对长按电源键(挂断键)和短按电源键(挂断键)的详细处理流程

    1. 简介 Android4.x在Framework的PhoneWindowManager对Power(KeyEvent.KEYCODE_POWER)和Home(KeyEvent.KEYCODE_HO ...

  6. UVA1452|LA4727-----Jump------经典的约瑟夫公式的变形(DP)

    本文出自:http://blog.csdn.net/dr5459 题目地址: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&a ...

  7. Cocos2d-x 3.0final手机游戏开发视频教程2014 - 自学编程 -(陆续更新中)

    内容: 非常多人问我:沈老师,要不要更新引擎版本号到3.0,更新这么快,以后会不会每一个月都有一次,好怕呀. 我说:无论你曾经是哪个版本号,3.0final是一个架构级别的升级,能够在新项目中果断升级 ...

  8. Android学习笔记之View(一):LayoutInflater

    使用LayoutInflater加载布局的两种方式: 第一种: LayoutInflater inflater=LayoutInflater.from(context); inflater.infla ...

  9. WCF技术剖析之二十七: 如何将一个服务发布成WSDL[基于HTTP-GET的实现](提供模拟程序)

    原文:WCF技术剖析之二十七: 如何将一个服务发布成WSDL[基于HTTP-GET的实现](提供模拟程序) 基于HTTP-GET的元数据发布方式与基于WS-MEX原理类似,但是ServiceMetad ...

  10. [HDU 1358]Period[kmp求周期]

    题意: 每一个power前缀的周期数(>1). 思路: kmp的next. 每一个前缀都询问一遍. #include <cstring> #include <cstdio> ...