一、引言

　　在web頁(yè)面中，如果頁(yè)面較高，為了方便用戶快速地返回頂部，都會(huì)添加一個(gè)返回頂部按鈕。例如：

　　其中淘寶網(wǎng)的是要滾動(dòng)條的滾動(dòng)距離大于某一段距離才顯示返回頂部按鈕；人人網(wǎng)的返回頂部直接在底部的工具條上；新浪微博的返回頂部在滾動(dòng)高度大于0的時(shí)候顯示，且返回頂部的效果是平滑動(dòng)畫效果。本文的實(shí)現(xiàn)就是類似于新浪微博的這種效果。//zxx:新浪微博今天啟用新域名weibo.com了

　　二、jQuery下的返回頂部功能

　　可以看到，如果頁(yè)面有滾動(dòng)高度，右下角就會(huì)有一個(gè)含有返回頂部字樣的黑色背景半透明的小條條，如下圖所示：

　　點(diǎn)擊這里返回頂部字樣的按鈕后，頁(yè)面就像是抹了潤(rùn)滑劑一樣，倏地一聲就滑到頂部了，同時(shí)，該點(diǎn)擊按鈕也玩起了躲貓貓 – 不見了。

　　實(shí)現(xiàn)的原理嘛，恩……估計(jì)鮮有人關(guān)心，所以我也懶得浪費(fèi)口水了，直接上代碼。

　　無(wú)論是這里的jQuery實(shí)現(xiàn)還是MooTools實(shí)現(xiàn)，下面的CSS代碼都是一致的，如下：

.backToTop {
    display: none;
    width: 18px;
    line-height: 1.2;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}        

        

        
        
      
        
it知識(shí)庫(kù)：仿新浪微博返回頂部的js實(shí)現(xiàn)(jQuery/MooTools)，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。