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 qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
js打造数组转json函数
Jan 14 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
深入研究React中setState源码
Nov 17 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
JavaScript实现表单验证功能
Dec 09 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安全配置方法
2007/06/16 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP实现的日历功能示例
2018/09/01 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
python自动化测试实例解析
2014/09/28 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
详解Python中的type和object
2018/08/15 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
电气专业应届生求职信
2013/11/01 职场文书
出生医学证明样本
2014/01/17 职场文书
个人委托书怎么写
2014/09/17 职场文书
外国人来华邀请函
2015/01/31 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Win10 Anaconda安装python-pcl
2022/04/29 Servers
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers