返回顶部按钮_兼容IE678火狐谷歌（转）

 

图片：（goTopBtn.png）【全透明】

css：

/***** 返回顶部按钮 *****/
body {_background-image: url(about:blank); _background-attachment: fixed; }/*防止按钮抖动*/
#goTopBtn {    position:fixed; text-align:center; width:50px; height:50px; line-height:50px; bottom:0px; font-size:12px; cursor:pointer; left:50%; margin-left:480px; _position: absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight - this.offsetHeight)); _background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/goTopBtn.png',sizingMethod='image')}

 

 

html：

<!--****************放在页面head部分***********************-->

 <!--引入js-->

<script type="text/javascript" src="../js/scrolltop.js"></script >
<!--引入js-->

 

<!--****************放在页面底部***********************-->
<!-- 返回顶部按钮 begin -->
<div style="display: none" id="goTopBtn"></div>
<script type="text/javascript">goTopEx();</script >
<!-- 返回顶部按钮 end -->

 

 

js（scrolltop.js）

// JavaScript Document
function goTopEx(){
        var obj=document.getElementById("goTopBtn");
        function getScrollTop(){
                return document.documentElement.scrollTop || document.body.scrollTop;
            }
        function setScrollTop(value){
            if(document.documentElement.scrollTop){
                    document.documentElement.scrollTop=value;
                }else{
                    document.body.scrollTop=value;
                }
                
            }    
        window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";
                    var h=document.body.scrollHeight - getScrollTop() - obj.offsetTop - obj.offsetHeight;
                    obj.style.bottom=0+"px";
                    if(h<350){
                        obj.style.bottom=340+"px";
                        obj.style.top="auto";
                    }

        
        }
        obj.onclick=function(){

            var goTop=setInterval(scrollMove,10);
            function scrollMove(){
                    setScrollTop(getScrollTop()/1.1);
                    if(getScrollTop()<1)clearInterval(goTop);

                }
        }
    }

 

 

JS第二版   原 Html  和Css 不变  引js的语句也不变

----【武哥增强版...修正上一版，到达底部之前 抖动的效果】

// JavaScript Document
function goTopEx(){
        var obj=document.getElementById("goTopBtn");
        function getScrollTop(){
                return document.documentElement.scrollTop || document.body.scrollTop;
            }
        function setScrollTop(value){
            if(document.documentElement.scrollTop){
                    document.documentElement.scrollTop=value;
                }else{
                    document.body.scrollTop=value;
                }
            }    

        obj.onclick=function(){

            var goTop=setInterval(scrollMove,1);
            function scrollMove(){
                    setScrollTop(getScrollTop()/1.1);
                    if(getScrollTop()<1)clearInterval(goTop);
                }
        }
  //让返回顶部标签，始终停在footer 之前！     
    var btmHeight = (-[1,])?340:350;
    window.onscroll=function(){
        getScrollTop()>0?obj.style.display="":obj.style.display="none";
        obj.style.bottom=0+"px";
        if(getDisFromBottom() <= btmHeight){
            obj.style.bottom=getDisFromBottom() + "px";
            obj.style.top="auto";
        }
    }

 
    function getDisFromBottom() {
        var dis = getScrollTop() +getClientHeight() + btmHeight - getScrollHeight();
        return  dis > 0 ? dis : 0;
    }
    function getScrollHeight() {
        return getDocEle().scrollHeight;
    }
    function getClientHeight() {
        return getDocEle().clientHeight;
    }
    function getDocEle() {
        return document.compatMode == 'CSS1Compat' ? document.documentElement : document.body;
    }


}