兼容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>
<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]-->
#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,睡觉去了...
赏
转载本站原创文章请注明：文章转自 挨踢路，链接: https://itlu.net./articles/1626.html
问题多多……
太复杂化了
找了好久~ 感谢分析 赞一个~嘿嘿
也欢迎来我的小站做客