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 相关文章推荐
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
js仿微博动态栏功能
Feb 22 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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
967 个函式
2006/10/09 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python实现维吉尼亚加密法
2019/03/20 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
个人作风剖析材料
2014/02/02 职场文书
干部现实表现材料
2014/02/13 职场文书
冬季安全检查方案
2014/05/23 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
家长会欢迎词
2015/01/23 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书