jQuery实现返回顶部功能

前端技术 2023/09/01 JavaScript

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

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

本文地址：https://www.stayed.cn/item/2803

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案