返回顶部JS(完美兼容IE6)

来源:互联网 发布:美国战列舰 知乎 编辑:程序博客网 时间:2024/05/17 01:30


工作需要写一个‘返回顶部’,几经周折,还是在网上找了两段现成的代码,经试验和修改,得到最终版本:(仅供学习使用,如有侵权,请联系本人)


<!--加载JS库-->
<script type="text/javascript" src="/js/jquery-1.4.2.js" charset="UTF-8"></script>

<!--返回顶部JS             放在文本底部-->
        <div style="display: none;float: right;position:fixed; _position: absolute;" 
            id="go_top" class="go_top"><img  style="border-radius:3px;"  border=0 src="/img/cmri/lanren_top.jpg">
        </div>
        <script type="text/javascript" src="/js/cmri/top.js" charset="UTF-8"></script> 
<!--返回顶部JS-->


<!-- top.js -->
<script>
var av_height = $(window).height();
    var av_width = $(window).width();
    var go_top= $("#go_top");
    var Gotop_w = go_top.width()+2;
    var Gotop_h = go_top.height()+2;
    var doc_width = 960;
    var Gotop_x = (av_width>doc_width?0.5*av_width+0.5*doc_width:av_width-Gotop_w);
    var Gotop_y = av_height-Gotop_h;
    var ie6Hack = "<style>.go_top{position:absolute; top:expression(documentElement.scrollTop+documentElement.clientHeight - this.offsetHeight-40);</style>}";
    if ($.browser.msie && ($.browser.version == "6.0")){
    $("body").append(ie6Hack);
    }
    function setGotop(){
    av_height = $(window).height();
    av_width = $(window).width();
    Gotop_y = av_height-Gotop_h-40;
    Gotop_x = (av_width>doc_width?0.5*av_width+0.5*doc_width:av_width-Gotop_w);
    if($(window).scrollTop()>0){
    go_top.fadeIn(200);
    }else{
    go_top.fadeOut(200);
    }
    if ($.browser.msie && ($.browser.version == "6.0")){
    go_top.animate({"left":Gotop_x},0);
    return false;
    }
    go_top.animate({"left":Gotop_x,"top":Gotop_y},0);
    }
    setGotop();
    $(window).resize(function(){
    setGotop();
    })
    $(window).scroll(function(){
    setGotop();
    })
    go_top.click(function(){
    $("html , body").animate({scrollTop:"0"},100);
    })
</script>
原创粉丝点击