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 相关文章推荐
window.onresize 多次触发的解决方法
Nov 08 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
angular directive的简单使用总结
May 24 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 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
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
python实现2048小游戏
2015/03/30 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
浅析Django中关于session的使用
2019/12/30 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
python/golang 删除链表中的元素
2020/09/14 Python
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
Linux面试题LINUX系统类
2015/11/25 面试题
《鞋匠的儿子》教学反思
2014/03/02 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
医院见习总结
2015/06/24 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS