回到顶部（IE下闪动bug） 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
html{_background-image:url(about:blank);  
    _background-attachment:fixed; }
#btn{ width:140px; height:38px; background:#FCF; font-size:24px; display:none;
position:fixed; bottom:0; right:0;  z-index:20;_position:absolute; _top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 38));}
</style>
<script>
window.onload=function(){
    var btn=document.getElementById('btn');
    var timer=null;
    var onOff=true;
    
    window.onscroll=function(){
        onOff=false;
        fn()
    };
    
    
    
    function fn(){
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        if(scrollTop==0){
            btn.style.display='none';
        }else{
            btn.style.display='block';
        }
    }
    
    btn.onclick=function(){
        clearTimeout(timer);
        var scrollTop = 0;
        timer=setInterval(function(){
            scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            speed=scrollTop/8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(scrollTop==0){
                clearInterval(timer)
            }
            document.documentElement.scrollTop=document.body.scrollTop=scrollTop-speed;
            onOff=true;
            
        },30)
    };
};
</script>
</head>

<body style="height:8000px; background:;">
<input id="btn" type="button" value="返回顶部" />
</body>
</html>

 

 

posted @ 2013-09-11 22:05  hugystyle  阅读(319)  评论(0)    收藏  举报