兼容IE6的返回顶部代码

不久前就在小站加了一个返回顶部的代码,但由于一直没有去理会IE6的浏览情况,所以没有发现,原来IE6下,是不兼容这个返回顶部,在IE6下,出现的地方,是在页面的最底部还要下面的地方,多杯具的一个事情。

一开始,我折腾的返回顶部,是固定下在版权信息的右上角的,后来看到很多论坛都有那么一个代码,就摸索着怎么给偷过来用,毕竟也就是一个JS应用嘛,写我肯定是不会的,偷还是稍微会一点,欢淫对我进行鄙视,哈哈~~~

IE7及以上的浏览器版本,是完全可以兼容的,唯独IE6这个老不死的东西,就是这样子的折腾人,没办法,单独处理。

我目前用的JS代码就很简单,也是利用了Jquery的,外部加载Jquery就不用多说了。JS代码如下:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
backTop=function (btnId){
    var btn=document.getElementById(btnId);
    var d=document.documentElement;
    window.onscroll=set;
    btn.onclick=function (){
        btn.style.display="none";
        window.onscroll=null;
        this.timer=setInterval(function(){
            d.scrollTop-=Math.ceil(d.scrollTop*0.1);
            if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
        },10);
    };
    function set(){btn.style.display=d.scrollTop?'block':"none"}
};
backTop('gotopbtn');
</script>

HTML代码更是简单:

<div id="gotopbtn">返回顶部</div>

其他就是CSS来渲染了,看CSS代码:

<style type="text/css">
#gotopbtn{width:20px;height:50px;line-height:999px;overflow:hidden;background:url(images/scrolltop.png) no-repeat 50% 0;position:fixed;_position:absolute;bottom:100px; left:50%; margin-left:440px;display:none;cursor:pointer}
</style>
<!--[if lt IE 6]>
<style type="text/css">
html{_text-overflow:ellipsis}
#gotopbtn{_position:absolute;_top:expression(eval(document.documentElement.scrollTop + 400))}
</style>
<![endif]-->

if lt IE 6就是原来判断IE6下的显示的,详细的判断规则可以看这里

text-overflow:ellipsis是为了解决IE6下图片抖动,其他就不细说了。图片下载,你懂的,我不就不提供了...需要的再单独联系吧...OK,至此,返回顶部的功能已经完美的兼容了IE6,睡觉去了...

查看 CSS HTML jquery js的相关文章

转载本站原创文章请注明:文章转自 灰狼IT路,链接: https://itlu.org/articles/1626.html

已有 3 条评论

  1. 回复 热心网友 热心网友

    问题多多……

  2. 太复杂化了

  3. 找了好久~ 感谢分析 赞一个~嘿嘿
    也欢迎来我的小站做客

添加新评论