jQuery实现返回顶部功能


Posted in Javascript onFebruary 23, 2016

代码很简单,这里就不多废话了,小伙伴们看代码吧。

HTML:        

<!--Go to Top-->
    <div id="Fixed">
      <a id="goTop" class="fl" title="去顶部" href="javascript:;">去顶部</a>
    </div>
    <!--Go to Top end-->

CSS:    

.fl{
    display:block;
    float:left;
    width:50px;
    height:50px;
    text-align:center;
    background-color:#eaeaea;
    background-image:url(../images/toTop.png);
  }
  .fl:hover{background-color:#f48942;background-image:url(../images/toTop.png);}

  #Fixed {
    position: fixed;
    _position: absolute;
    z-index: 100;
    bottom: 70px;
    left: 50%;
    margin-left: 530px;
    _bottom: auto;_top:
    expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-70);
    width: 50px;
    text-indent: -40000px;
    background: #fff
  }

  /*置顶 end*/

Js:    

/*置顶功能*/
  $(function(){
  $(window).bind('scroll', {
    fixedOffsetBottom: parseInt($('#Fixed').css('bottom'))
  },
  function(e) {
    var scrollTop = $(window).scrollTop();
    var referFooter =$('#footer');
    scrollTop > 100 ? $('#goTop').show() : $('#goTop').hide();
    if (!/msie 6/i.test(navigator.userAgent)) {
      if ($(window).height() - (referFooter.offset().top - $(window).scrollTop()) > e.data.fixedOffsetBottom) {
        $('#Fixed').css('bottom', $(window).height() - (referFooter.offset().top - $(window).scrollTop()))
      } else {
        $('#Fixed').css('bottom', e.data.fixedOffsetBottom)
      }
    }
  });

  $('#goTop').click(function() {
    $('body,html').stop().animate({
      'scrollTop': 0,
      'duration': 100,
      'easing': 'ease-in'
    })
  });
  });
  /*置顶功能 end*/
Javascript 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
深入理解vue中的$set
Jun 01 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 #Javascript
理解javascript定时器中的单线程
Feb 23 #Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 #Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 #Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 #Javascript
javascript每日必学之多态
Feb 23 #Javascript
javascript每日必学之继承
Feb 23 #Javascript
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php fckeditor 调用的函数
2009/06/21 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
个人求职信范文
2014/05/24 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
篮球赛新闻稿
2015/07/17 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
详解Vue的列表渲染
2021/11/20 Vue.js