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+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 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设计模式之迭代器模式的深入解析
2013/06/13 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
JSON取值前判断
2014/12/23 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python实现的读写json文件功能示例
2018/06/05 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Python如何将装饰器定义为类
2020/07/30 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
abstract是什么意思
2012/02/12 面试题
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
无故旷工检讨书
2014/01/26 职场文书
旷课检讨书3000字
2014/02/04 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
建房合同协议书
2016/03/21 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
python超详细实现完整学生成绩管理系统
2022/03/17 Python
JavaScript中reduce()的用法
2022/05/11 Javascript