跳轉至頭部

今天切一個專題頁，頁面比較長，想在右下角加一個返回頭部的按鈕。

一開始模仿w3cplus.com用了普通的錨點定位，代碼如下：

<div id="goToTop">
<a title="回到頂部" href="#">TOP</a>
</div>

#goToTop {
    bottom: 5px;
    position: fixed;
    right: 5px;
    z-index: 9000;
}

發現在ie6底下，居然錯位，跑到左下角去了，心想，應該不會呀，這個網站都是這樣搞滴，於是用ie打開，崇拜已久的w3cplus網站，它的網站居然沒有考慮到ie6，用的都是新技術。哎，沒辦法，只能自己來了。

···插曲：以前在公司只要測IE6,7,8,9，ff，谷歌，現在做國內站，除了這些主流的，還得測，360，搜狗，遨遊，safari，蘋果。。天哪。兼容性問題，像360這樣變態的瀏覽器，似IE內核又不是IE內核，頭疼哪。。

回到正題。。

於是，朋友建議用了jquery，畢竟用ie hack定位，不太好，其實我目前還不是很喜歡js，畢竟不是自己寫的代碼，都是調用的，如果遇到問題，解決不了，那豈不是很糗，於是一直在惡補js，那本厚厚的js權威指南，一番就犯困，太概念性了，還是得實踐實踐在實踐，我相信幾個月之後會有突破的。

一開始一直無效果，原來是js加載順序的問題，ohmygod，超想屎的。現在ok了，ie6下也行，明天去看看那些國內其他瀏覽器的效果。

方法如下：

1，調用jquery的官方類庫。。傳說中jquery-1.3.1.js這個最好用，我個人不喜歡過時的東西。。

2，調用一個別人寫的gototop的js。。（誰來解釋一下）

jQuery.fn.floatdiv=function(location){
    var isIE6=false;
    var Sys={};
    var ua=navigator.userAgent.toLowerCase();
    var s;
    (s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:0;
    if(Sys.ie&&Sys.ie=="6.0"){isIE6=true;}
    var windowWidth,windowHeight;
    if(self.innerHeight){
        windowWidth=self.innerWidth;
        windowHeight=self.innerHeight;
    }
    else if(document.documentElement&&document.documentElement.clientHeight){
        windowWidth=document.documentElement.clientWidth;
        windowHeight=document.documentElement.clientHeight;
    }else if(document.body){
        windowWidth=document.body.clientWidth;
        windowHeight=document.body.clientHeight;
    }
    return this.each(function(){
        var loc;
        var wrap=$("<div></div>");
        var top=-1;
        if(location==undefined||location.constructor==String){
            switch(location){
                case("rightbottom"):
                    loc={right:"0px",bottom:"0px"};
                    break;
                case("leftbottom"):
                    loc={left:"0px",bottom:"0px"};
                    break;
                case("lefttop"):
                    loc={left:"0px",top:"0px"};
                    top=0;
                    break;
                case("righttop"):
                    loc={right:"0px",top:"0px"};
                    top=0;
                    break;
                case("middletop"):
                    loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};
                    top=0;
                    break;
                case("middlebottom"):
                    loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};
                    break;
                case("leftmiddle"):
                    loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};
                    top=windowHeight/2-$(this).height()/2;
                    break;
                case("rightmiddle"):
                    loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};
                    top=windowHeight/2-$(this).height()/2;
                    break;
                case("middle"):
                    var l=0;
                    var t=0;
                    l=windowWidth/2-$(this).width()/2;
                    t=windowHeight/2-$(this).height()/2;
                    top=t;
                    loc={left:l+"px",top:t+"px"};
                    break;
                default:
                    location="rightbottom";
                    loc={right:"0px",bottom:"0px"};
                    break;
            }
        }else{
            loc=location;
            var str=loc.top;
            if(typeof(str)!='undefined'){
                str=str.replace("px","");top=str;
            }
        }
        if(isIE6){
            if(top>=0){
                wrap=$("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight /2-this.offsetHeight/2);\"></div>");
            }
            else{
                wrap=$("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");
            }
        }
        $("body").append(wrap);wrap.css(loc).css({position:"fixed",z_index:"999"});
        if(isIE6){
            wrap.css("position","absolute");
            $("body").css("background-p_w_upload","fixed").css("background-p_w_picpath","url(n1othing.txt)");
        }
        $(this).appendTo(wrap);
    });
};

3，在html頁面中引用

<script>
    (function(){
        var lc = $('#goToTop');
        lc.floatdiv('rightbottom');
    })()
</script>

求解：還有沒有更好，更簡單的辦法啊。。