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 相关文章推荐
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 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
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
浅谈php://filter的妙用
2019/03/05 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
Django添加feeds功能的示例
2018/08/07 Python
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
乌鸦喝水教学反思
2014/02/07 职场文书
护士工作失误检讨书
2014/09/14 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
新员工考核评语
2014/12/31 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书