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 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
详解cordova打包成webapp的方法
Oct 18 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 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
PHP中动态HTML的输出技术
2006/10/09 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
Js apply方法详解
2017/02/16 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python中http请求方法库汇总
2016/01/06 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python简单操作excle的方法
2018/09/12 Python
Django Rest framework频率原理与限制
2019/07/26 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
学习心得体会
2014/01/01 职场文书
公司股权转让协议书
2014/04/12 职场文书
节能环保演讲稿
2014/08/28 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2016年情人节广告语
2016/01/28 职场文书
导游词之广西漓江
2019/11/02 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android