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 相关文章推荐
点击进行复制的JS代码实例
Aug 23 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 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
30个php操作redis常用方法代码例子
2014/07/05 PHP
Yii框架form表单用法实例
2014/12/04 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
angular2模块和共享模块详解
2018/04/08 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
详解Django中的form库的使用
2015/07/18 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
numpy.random模块用法总结
2019/05/27 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python读文件的步骤
2019/10/08 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Python 爬虫性能相关总结
2020/08/03 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
SQL语言面试题
2013/08/27 面试题
材料加工硕士生求职信
2013/10/10 职场文书
销售部主管岗位职责
2013/12/18 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫