首页 > 代码库 > jquery返回顶部-ie6配合css表达式。

jquery返回顶部-ie6配合css表达式。

2024-07-07 20:45:18   225人阅读

css:

.wraper{ width:980px; height:2048px; margin:0 auto; background:#ccc; }
/*返回头部*/
#backToTop a{ display:block; cursor:pointer;width:25px; height:26px; text-indent:-9999em; position:absolute; left:0; top:0; z-index:10;}
#backToTop .bt_bg{
        background:url(http://i0.cy.com/xtl/main/20140227/backTop.png) no-repeat;_background: 0; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.mamicode.com/‘http://i0.cy.com/xtl/main/20140227/backTop.png‘,sizingMethod=‘scale‘); 
        width:25px; height:26px ; position:absolute; left:0; top:0; z-index:8; }
#backToTop { display:none; width:25px; height:26px ; position:fixed; right:50%; margin-right:-533px; bottom:110px; z-index:1; }
/**针对ie6设置*/
*html #backToTop { position:absolute; margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + ‘px‘);}

 

html:

    <div class="wraper">
        
    </div>
    <script type="text/javascript" src="http://www1.changyou.com/scripts/jquery.min.js"></script>

 

javascript：

    $(‘body‘).append($(‘<div id="backToTop"><a href="javascript:void(0);">回到顶部</a><div class="bt_bg"></div></div>‘).hide(0));
    $(window).scroll(function(){
        $(‘#backToTop‘).show();
        if ($(document).scrollTop() != 0) 
            $(‘#backToTop‘).show();
        else 
            $(‘#backToTop‘).hide();
    });
    $(‘#backToTop a‘).click(function(){
        $(‘html, body‘).animate({
            scrollTop: 0
        }, 800);
        return false;
    });

 


联系
我们