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

    <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. CGroup 介绍、应用实例及原理描述

    CGroup 介绍 CGroup 是 Control Groups 的缩写,是 Linux 内核提供的一种可以限制.记录.隔离进程组 (process groups) 所使用的物力资源 (如 cpu ...

  2. BufferedInputStream 源码分析

    一.简介 BufferedInputStream会缓存一部分数据(默认8K),这个函数的作用就是读取更多的数据到缓存,必要的时候会扩大缓存的内容. 在该类中有几个重要的标志位:markpos,pos, ...

  3. Directshow 通过 put_Owner 指定显示窗口后,自动刷新问题

    在Directshow中,我们可以对render指定显示窗口,在写程序的过程中, 发现通过put_Owner设置的显示窗口存在自动刷新问题,譬如窗口被遮挡然后再次露出时,被遮挡部分不能自动刷新,需要拖 ...

  4. ASP.NET MVC 5 学习教程:使用 SQL Server LocalDB

    原文 ASP.NET MVC 5 学习教程:使用 SQL Server LocalDB 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 ...

  5. PHP - 四级单词lrc文件解析为txt

    原始文件: 转换后文件: php代码: 首先根据需要更改文件路径. 转换后存放的文件要事先创建,为txt文件. 核心代码:正则表达式替换: <?php header('Content-type: ...

  6. 03-OC实例方法、内存管理

    目录: 一.实例方法和类方法 二.工厂方法 三.self 四.编程规范 五.内存管理 回到顶部 一.实例方法和类方法 1 只能通过实例调用的方法叫实例方法."-" 2 只能通过类调 ...

  7. MYSQL中delete删除多表数据与删除关联数据

    在mysql中删除数据方法有很多种,最常用的是使用delete来删除记录,下面我来介绍delete删除单条记 录与删除多表关联数据的一些简单实例. 1.delete from t1 where 条件 ...

  8. [置顶] getline函数-linux

    头文件: #include <stdio.h> 函数: ssize_t getline(char **lineptr, size_t *n, FILE *stream); eg: ssiz ...

  9. php实现加好友功能

    思路: 1用户发送好友申请之后 把申请储存到申请数据表中,状态为 未验证 2 当用户登录时,查询申请表中是否有uid和被申请人id相同的,如果同意,更改状态,并把数据插入到对应的好友数据表否则,删除申 ...

  10. Javascript面向对象研究心得

    这段时间正好公司项目须要,须要改动fullcalendar日历插件,有机会深入插件源代码.正好利用这个机会,我也大致学习了下面JS的面向对象编程,感觉收获还是比較多的. 所以写了以下这篇文章希望跟大家 ...