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实现的类flash菜单效果代码
May 17 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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新手上路(八)
2006/10/09 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
div层的移动及性能优化
2010/11/16 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
JavaScript多线程详解
2015/08/12 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python实现接口并发测试脚本
2019/06/25 Python
基于python使用tibco ems代码实例
2019/12/20 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
计算机本科生自荐信
2013/10/15 职场文书
平安工地汇报材料
2014/08/19 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
被告代理词范文
2015/05/25 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android