实现置顶功能jQuery

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*/
    原文作者:mli
    原文地址: https://segmentfault.com/a/1190000000698293
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞