您的位置:首页 > Web前端 > JavaScript

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

2013-01-30 13:25 405 查看



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

<!--加载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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: