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 相关文章推荐
jQuery之折叠面板的深入解析
Jun 19 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
angular2使用简单介绍
2016/03/01 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python高效编程技巧
2013/01/07 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python3 log10()函数简单用法
2019/02/19 Python
python快排算法详解
2019/03/04 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
python中pow函数用法及功能说明
2020/12/04 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
工作失职检讨书范文
2014/01/16 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers