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

    <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. 为什么 Flask 有那么多的好评?

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:松鼠奥利奥链接:http://www.zhihu.com/question/28902969/answer/42530571来 ...

  2. search_word

    一个小程序,用asc码输出自己的名字.要求是,a~z两路输入,输出了一个完整的拼音之后还需要输出一个空格.—— 信息硬件过滤的雏形. module search_word ( clock , rese ...

  3. JSON数组分配输出每个li

    有这么一个JSON数组,需求是只需要输出每个数组里面的某个值,不需要全部输出来. var data = [ { ", "Cost":"13,642.41&quo ...

  4. C语言实现单链表的逆置

          单链表的逆置是一个非常经典的问题,这里利用两个思想进行解决.       首先,我们需要看下原理图,其实两个思想都是一样的,都是使后一个的节点的 next 指针指向前一个节点,依次递推,直 ...

  5. android网络编程注意事项之一:移动网络下,防止网络超时甚至连接不上,解决办法--为网络请求设置代理

    Android应用程序访问互联网资源时,在Wifi的情况下处理网络连接按照上文所讲述的方法步骤即可顺利实现:但如果当前Android设备的联网方式是通过移动运营商的网络服务为中转,间接访问的互联网资源 ...

  6. UNIX网络编程——网络数据包检测

    网络数据包检测 数据包捕获(sniffer):是指在网络上进行数据收集的行为,需要通过网卡来完成. 三种访问方式: BSD Packet Filter(BPF) SVR4 Datalink Provi ...

  7. MVC 向页面传值方式总结

    总结发现ASP.NET MVC中Controller向View传值的方式共有6种,分别是: ViewBag ViewData TempData 向普通View页面传一个Model对象 向强类型页面传传 ...

  8. Android:ViewPager04

    目录结构层次: 注意点: 1.MyAdapter.java一定要 extends PagerAdapter 2.MyAdapter要覆写以下几个方法: a.public int getCount(){ ...

  9. Android项目实战手机安全卫士(01)

    目录 项目结构图 源代码 运行结果 项目结构图 源代码 SplashActivity.java package com.coderdream.mobilesafe.activity; import a ...

  10. Java__jar包的简单操作

    工作需要研究了下jar,这里就举个简单的例子,以helloworld为例吧 1.启动eclipse编写代码: 次步不做赘述 package cn.test.jar; public class Hell ...