首页 > 编程 > JavaScript > 正文

jQuery实现返回顶部功能

2019-11-20 10:31:57
字体:
来源:转载
供稿:网友

代码很简单,这里就不多废话了,小伙伴们看代码吧。

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*/

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表