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 相关文章推荐
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
php 修改密码实现代码
May 24 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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/07/04 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python实现通讯录功能
2018/02/22 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书