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 跳转页面延迟2种方法
Mar 29 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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
Terran魔法科技
2020/03/14 星际争霸
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
详解Python中with语句的用法
2015/04/15 Python
python抽象基类用法实例分析
2015/06/04 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
临床医学专业个人的自我评价
2013/09/27 职场文书
医药营销专业个人自荐信
2013/09/29 职场文书
教师自荐书
2013/10/08 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
广告语设计及教案
2014/03/21 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
2015年小学生新年寄语
2014/12/08 职场文书