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 实现??打印?理
Apr 28 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
原生js实现照片墙效果
Oct 13 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP中extract()函数的定义和用法
2012/08/17 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
留学自荐信的技巧
2013/10/17 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
经典演讲稿汇总
2014/05/19 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
担保书格式
2015/01/20 职场文书
小学教师自我评价
2015/03/04 职场文书
开学第一周总结
2015/07/16 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers