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扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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/06/08 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue如何截取字符串
2019/05/06 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python生成随机图形验证码详解
2017/11/08 Python
python学生信息管理系统
2018/03/13 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
Python中生成ndarray实例讲解
2021/02/22 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
高中生的自我鉴定范文
2014/01/24 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
颐和园的导游词
2015/01/30 职场文书
物业接待员岗位职责
2015/04/15 职场文书
学困生转化工作总结
2015/08/13 职场文书
合同补充协议书
2016/03/24 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python