回到頂部的頁面跟隨按鈕（仿淘寶）

工作中越來越覺得模塊化的重要，有些功能提出來更便於今後重用，於是從今天起，工作中寫的模塊化的東西我會把他們提出來，也方便大家參考學習。現在 的技術和前端博客貌似都喜歡在文章前面配個抬頭圖。那麼我以後也配吧，另外我承認今天的頭圖風格抄自騰訊CDC（這種wp風格的東西怎麼巨不搭啊~）。

在工作中經常會做一些巨長無比的頁面，這些頁面包括產品列表頁，或者SNS的好友信息列表等等。當用戶將頁面向下拉動的時候，用戶發現，頁面怎麼這 麼長，怎麼拉不完呢？化用小飯小說的一句話說“你能把頁面寫出來，我沒理由看不完的啊”。當這個頁面高度超過5000px，用戶就受不了啦，他被自己 1024*768的lcd顯示器刺痛了雙眼，從而失去了自己當前的focus（焦點），這時候她為了搞清楚自己的focus，就想：“bless me回到頁面頭部吧！”，按鼠標的手向右尋找，找到了他IE右邊的scrollbar。這種事情時常發生。所以很多程序員朋友浏覽網頁使用鍵盤的 pagedown或者向下按鍵去翻頁。這樣他就比較清楚自己的位置。快捷鍵是上帝賜給人類的禮物，有些人沒有這種禮物，於是無所不曉的前端開發者們在曾幾 何時說了：“要有返回頂部跟隨頁面滾動的按鈕。”於是這種按鈕出現了，出現在淘寶的寶貝列表裡，出現在SNS好友信息的列表裡。

 

言歸正傳，先貼最終效果：

需求：

1 頁面scrollTop為0的時候不顯示此按鈕，下拉頁面後漸顯，上拉頁面回到頁面頭部後漸隱，並跟隨頁面拉動處在頁面右邊固定位置。

2 網上大多代碼都是相對window定位來個fixed，我們的需求不要他fixed，而要相對外層container定位，從而可以緊靠container右端，而不至於調整浏覽器寬度時致使此按鈕浮動在頁面內容之上。

3 兼容所有當前要照顧的浏覽器，包括ie6。

需要准備的工具：

電腦一個，jQuery庫一個

img素材：

先讓我們寫HTML吧：

<div id="container">
</div>

是不是很簡單呢，CSS也不是很復雜，.go-top是按鈕的容器，absolute的定位是針對他外面的relative的，這 個relative會通過js加在id為container的容器上。right:-30px保證這個東西出現在container容器的右端，a的 cursor和outline僅作裝飾作用，當然你也可以加個background啊什麼的，以你覺得好看為准:

.go-top{ width:25px; height:65px; position:absolute; right:-30px;}
.go-top a{ display:block; cursor:pointer; outline:none;}

寫JS是關鍵的部分，主要用到的方法就是個scroll()吧，使用這個東西能夠讓頁面隨著你的鼠標滾動而動態改變go-top距頁面頂端（准確說是body或html頂端）的距離:

代碼

$(function(){
    var topDistance = 450;//go-top距頂端距離
    var showDistance = 1;//距離頂端多少距離開始顯示go-top
    var gotopCon = "<div class='go-top'><a href='#'><img src='images/gotop.gif' /></a></div>"
    var thisTop = $(window).scrollTop() + topDistance;
    $("#container").css("position","relative");
    $("#container").append(gotopCon);
    $(".go-top").css("top",thisTop);
    if($(window).scrollTop() < showDistance){
        $(".go-top").hide();
        }
    $(window).scroll(function(){
        thisTop = $(this).scrollTop() + topDistance;
        $(".go-top").css("top",thisTop);
        if($(this).scrollTop() < showDistance){
            $(".go-top").fadeOut("fast");
            }else{
                $(".go-top").fadeIn("fast");
                }
        });
    $("a",".go-top").click(function(){
        $("html").animate({scrollTop:0},"fast");//IE,FF
        $("body").animate({scrollTop:0},"fast");//Webkit
        return false;
        });
    });

 

好了，今天的課上到這裡，有問題的同學下課留下來問問題，其他同學出去玩去吧。