实现置顶功能jQuery

来源：互联网发布：电脑软件双开器编辑：程序博客网时间：2024/06/02 22:01
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*/
0 0