jQuery實現(xiàn)返回頂部功能

更新時間：2016年02月23日 11:48:00 投稿：hebedich

很多網(wǎng)站上都有返回頂部的效果,本文闡述如何使用jquery實現(xiàn)返回頂部按鈕。希望大家能夠喜歡

代碼很簡單，這里就不多廢話了，小伙伴們看代碼吧。

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

您可能感興趣的文章: