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 类似flash效果的立体图片浏览器
Feb 08 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
jQuery表单验证之密码确认
May 22 jQuery
react+redux的升级版todoList的实现
Dec 18 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
iView框架问题整理小结
Oct 16 Javascript
Html5生成验证码的示例代码
May 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
百度地图API使用方法详解
2015/08/25 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
Python生成随机数的方法
2014/01/14 Python
python递归计算N!的方法
2015/05/05 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python编写计算器功能
2019/10/25 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
Java程序员面试题
2016/09/27 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
小学生作文评语集锦
2014/12/25 职场文书