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的颜色选择插件实例代码
Oct 02 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
github配置使用指南
2014/11/18 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python扩展内置类型详解
2018/03/26 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
python 6行代码制作月历生成器
2020/09/18 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
李白故里导游词
2015/02/12 职场文书
2014年个人年终总结
2015/03/09 职场文书
安全教育主题班会教案
2015/08/12 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
PyTorch 如何自动计算梯度
2021/05/23 Python
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android