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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
javascript闭包入门示例
Apr 30 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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开发框架总结收藏
2008/04/24 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
详解ES6中的let命令
2020/04/05 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python分割和拼接字符串
2013/11/01 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
深入理解python try异常处理机制
2016/06/01 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python实现图像识别功能
2018/01/29 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
李培根演讲稿
2014/05/22 职场文书
人事任命书怎么写
2014/06/05 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
初中思想品德教学反思
2016/02/24 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技