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

    <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. 180China丨the Agency for Brand Engagement and Experience

    180China丨the Agency for Brand Engagement and Experience Welcome to 180. Welcome to Creativity. Thank ...

  2. 数据库基础学习3-T-SQL语句

    一.语句操作的基本方法 1.选中执行. 2.注释的方法‘--’. 二.数据类型 整数:int,bigint,smallint 小数:float,decimal(长度,精度) 字符:char(n),va ...

  3. BZOJ 3631: [JLOI2014]松鼠的新家( 树链剖分 )

    裸树链剖分... ------------------------------------------------------------------- #include<bits/stdc++ ...

  4. Jsp的include指令静态导入和动态导入的区别

    1.什么是静态导入? 静态导入指的是,将一个外部文件嵌入到当前JSP文件中,同时解析这个页面的JSP语句,它会把目标页面的其他编译指令也包含进来. include的静态导入指令使用语法: <%@ ...

  5. 从 Qt 的 delete 说开来

    原地址:http://blog.csdn.net/dbzhang800/article/details/6300025 在C++中学习过程中,我们都知道: delete 和 new 必须 配对使用(一 ...

  6. 基于visual Studio2013解决C语言竞赛题之0708字符串查找

       题目

  7. 设计模式(Abstract Factory)抽象工厂

    1. 需求: 设计一个电脑组装程序,对于组装品牌电脑. 用零件组装(主板.硬盘.显示器)由品牌提供的所有. 让我们组装一台联想电脑,板子.由联想提供. (眼下仅仅有Lenovo和Dell两种品牌) 2 ...

  8. Windows下用WinSCP传输数据到Linux上

    Scenario:最近公司做的一个项目,UI部分我是使用python在编译时做localization的,是linux下运行的,但是开发是在windows下进行的每次编译后都要手动通过WinSCP这个 ...

  9. 手把手教你安装QT集成开发环境(操作系统为ubuntu10.04)

    在安装QT集成开发工具包之前需要先安装build-essential和libncurses5-dev这两个开发工具和库,libncurses5-dev库是一个在Linux/Unix下广泛应用的图形函数 ...

  10. 动态Pivot(1)

    原文 http://book.51cto.com/art/200710/58874.htm 7.7  动态Pivot 作为另外一个练习,假设你要编写一个存储过程,它生成动态Pivot查询.这个存储过程 ...