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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
Vue2几种常见开局方式详解
Sep 09 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
vue实现评价星星功能
Jun 30 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
摩卡咖啡
2021/03/03 咖啡文化
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python 做曲线拟合和求积分的方法
2018/12/29 Python
Python中最大递归深度值的探讨
2019/03/05 Python
eclipse创建python项目步骤详解
2019/05/10 Python
学习python分支结构
2019/05/17 Python
python实现图片九宫格分割
2021/03/07 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python换行与不换行的输出实例
2020/02/19 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
C#笔试题集合
2013/06/21 面试题
工程采购员岗位职责
2014/03/09 职场文书
认购协议书范本
2014/04/22 职场文书
导航工程专业自荐信
2014/09/02 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python