jquery实现的鼠标下拉滚动置顶效果


Posted in Javascript onJuly 24, 2014
$(function(){ 
    //置顶按钮显示/隐藏实现 
    $(window).scroll(function(){ 
      var w_height = $(window).height();//浏览器高度 
      var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度 
      if(scroll_top > w_height){ 
          $("#goto-top").fadeIn(500); 
        }else{ 
          $("#goto-top").fadeOut(500); 
      } 
    }); 
  //置顶 
  $("#goto-top").click(function(e){ 
      e.preventDefault(); 
      $(document.documentElement).animate({ 
        scrollTop: 0 
        },200); 
      //支持chrome 
      $(document.body).animate({ 
        scrollTop: 0 
        },200); 
    }); 
  }) 
</script> 
<style type="text/css"> 
  #goto-top { 
    display:none; 
    position:fixed; 
    width:38px; 
    height:36px; 
    background:url(images/goto-top.png) no-repeat 0 0; 
    bottom:40px; 
    right:40px; 
    -webkit-transition:all 0.2s; 
    -moz-transition:all 0.2s; 
    -o-transition:all 0.2s; 
    transition:all 0.2s; 
    z-index:9999; 
  } 
  #goto-top:hover { 
    background:url(images/goto-top.png) no-repeat 0 -36px; 
  } 
</style> 
</head>
Javascript 相关文章推荐
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
浅析Ajax语法
Dec 05 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
js创建对象的区别示例介绍
Jul 24 #Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 #Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 #Javascript
技术男用来对妹子表白的百度首页
Jul 23 #Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 #Javascript
JS在IE下缺少标识符的错误
Jul 23 #Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 #Javascript
You might like
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
Node.js的特点详解
2017/02/03 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
Angular4学习笔记router的简单使用
2018/03/30 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
JS实现轮播图效果
2020/01/11 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
python3跳出一个循环的实例操作
2020/08/18 Python
python logging模块的使用
2020/09/07 Python
Python字典实现伪切片功能
2020/10/28 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
python3实现飞机大战
2020/11/29 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
法学个人求职信范文
2014/01/27 职场文书
高考励志标语
2014/06/05 职场文书
志愿者活动总结报告
2014/06/27 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
逃课检讨书范文
2015/05/06 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书