返回顶部按钮_兼容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;

    }

}