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监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
Vue3实现简易音乐播放器组件
Aug 14 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python的命名规则知识点总结
2019/10/04 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
How TDD works
2012/09/30 面试题
综合办公室个人的自我评价
2013/12/22 职场文书
员工工作表现评语
2014/04/26 职场文书
优秀员工评优方案
2014/06/13 职场文书
机电专业求职信
2014/06/14 职场文书
师德先进个人材料
2014/12/20 职场文书
歌剧魅影观后感
2015/06/05 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
python flappy bird小游戏分步实现流程
2022/02/15 Python
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
使用Python获取字典键对应值的方法
2022/04/26 Python
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技