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 相关文章推荐
jquery清空textarea等输入框实现代码
Apr 22 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
javascript操作cookie
Jan 17 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
JS实现多选框的操作
Jun 24 Javascript
js实现验证码干扰(动态)
Feb 23 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文件读写操作之文件写入代码
2011/01/13 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
javascript json2 使用方法
2010/03/16 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python算的上脚本语言吗
2020/06/22 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
社区端午节活动方案
2014/01/28 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
企业员工集体活动方案
2014/08/17 职场文书
办护照工作证明
2014/10/01 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
python如何将mat文件转为png
2022/07/15 Python