兼容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://888929.tm7j5.group/articles/1626.html
问题多多……
太复杂化了
找了好久~ 感谢分析 赞一个~嘿嘿
也欢迎来我的小站做客