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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 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
提问的智慧
2006/10/09 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
美丽人生观后感
2015/06/03 职场文书