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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
jquery each()源代码
Feb 14 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
document.forms用法示例介绍
Jun 26 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
Vue通过provide inject实现组件通信
Sep 03 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
初识Laravel
2014/10/30 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
深入讲解Python编程中的字符串
2015/10/14 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
初婚初育证明
2014/01/14 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
报效祖国演讲稿
2014/09/15 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
大学学生会竞选稿
2015/11/19 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫