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 事件流和事件绑定
Jul 16 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
vue生命周期实例小结
Aug 15 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
javascript实现前端成语点击验证优化
Jun 24 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 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
Highcharts入门之简介
2016/08/02 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
JS实现音乐导航特效
2020/01/06 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
Python栈算法的实现与简单应用示例
2017/11/01 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
How TDD works
2012/09/30 面试题
旅游管理专业学生求职信
2013/09/28 职场文书
计算机科学与技术应届生求职信
2013/11/07 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
趣味活动策划方案
2014/02/08 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
安全先进班组材料
2014/12/26 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
初中语文教学研修日志
2015/11/13 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
Python Socket编程详解
2021/04/25 Python
用python开发一款操作MySQL的小工具
2021/05/12 Python