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

    <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. 树莓派安装ftp服务器

    在树莓派安装ftp服务器,可上载\下载文件 vsftpd是开源的轻量级的常用ftp服务器. 1,安装vsftpd服务器 (约400KB)sudo apt-get install vsftpd 2,启动 ...

  2. ZOJ 2852 Deck of Cards DP

    题意: 一一个21点游戏. 1. 有三个牌堆,分别为1X,2X,3X. 2. 纸牌A的值为1,纸牌2-9的值与牌面面相同,10(T).J.Q.K的值为10,而而joke(F)的值为 任意大大. 3. ...

  3. Dijkstra、Dij + heap、Floyd、SPFA、 SPFA + SLF Template

    Dijkstra in Adjacency matrix : int Dijkstra(int src,int tec, int n){ ]; ]; memset(done,,sizeof(done) ...

  4. Chapter 1.简单工厂模式

    该篇文章通过一个写计算器控制台程序,来导入文章主题. 首先,要注意代码规范,变量命名有意义,不能随意用A,B,C;    功能要封装好,不要写在一个主函数里,另外要考虑后期需求的更改,如果出现多个函数 ...

  5. DW8051调试终结

    都不记得自己到底揪心了多久 —— 归根结底还是自己太菜了.终于找到了DW8051移植的bug. 这么大的一个图居然没有看到,真是气煞老夫也. 在原来移植的基础之上加两个反相器就OK 了

  6. Python基础1:一些小知识汇总

    一.#!usr/bin/env python 脚本语言的第一行,指定执行脚本的解释器. #!/usr/bin/python 是告诉操作系统执行这个脚本的时候,调用/usr/bin下的python解释器 ...

  7. 用QFileSystemWatcher来监视文件和目录的改变(内部还是使用了timer)

    Use Case: 两个程序共享同一个Configuration文件,当一个程序作出改变的时候,需要另外一个程序能够及时响应. 之前其实猜的八九不离十,估计是有一个Timer,然后定时查询Config ...

  8. PHP用CURL或fsockopen伪造IP和来路(referer)

    URL是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 CURL库. 我们可以用CURL来伪造IP和来路,例子:1.php 请求 ...

  9. linux c 得到文件大小

    #include <sys/stat.h> unsigned long get_file_size(const char *path) { unsigned long filesize = ...

  10. 深入探究VC —— 链接器link.exe(4)

    在程序编译完成后,生成的文件是以.obj为扩展名的对象文件,link.exe是将这些对象文件与库链接起来以创建可执行文件或动态链接库文件的工具. link.exe的输入文件包括obj文件.lib文件. ...