回到頂部總結

網站中的回到頂部功能有益於增強用戶體驗，當一個頁面很長很長時，回到頂部是必不可少的。

回到頂部按鈕，可以使用圖片，背景圖，矢量字體圖標，也可以使用代碼 css 生成。這里使用 css 生成的方法。

<a href="" title="回到頂部" id="toTop">
    <span id="arrow"></span>
</a>

#toTop {
    display: none;
    position: fixed; /* 固定定位 */
    right: 10px;
    bottom: 30px;
    background-color: #e6e6e6;
    height: 40px;
    line-height: 40px;
    width: 40px;
    transition: all .4s ease .1s;
}
#toTop:hover { background-color: #b7b7b7; }
#toTop span {
    position: relative; /* 相對定位，以便其偽元素絕對定位 */
    top: 5px;
    left: 15px; /* 變換為順時針旋轉 30°，通過數學角度計算后適當調整位置 */
    display: inline-block;
    width: 3px;
    height: 20px;
    background-color: #fff;
    border-radius: 3px;
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
}
#toTop span:after {
    content: "";
    position: absolute; /* 偽元素中是相對於 #toTop span 絕對定位 */
    top: -5px;
    left: 8px;
    display: inline-block;
    width: 3px;
    height: 20px;
    background-color: #fff;
    border-radius: 3px;
    -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
            transform: rotate(-60deg);
}

使用 css 代碼生成的回到頂部按鈕如下：

 

對於回到頂部的多種方法總結如下：

1. 錨標記

# 包含了一個位置信息，默認的錨是 #top 也就是網頁的頂端。

方法：

1. 對回到頂部的按鈕使用錨標記，即 a 標簽，<a href="#top"  title="回到頂部">回到頂部</a>

2. 在頁面的頂部放置定位目標，<a name="top" id="top"></a>，這里的 name 屬性和 id 屬性的值比第一步驟中的 href 屬性的值少一個 #，name 和 id 選擇一個即可。

缺點：

會在地址欄里多出 # 符號。

2. JavaScript Scroll 事件:

<a href="javascript:scroll(0, 0)" title="返回頂部">返回頂部</a>

scroll(0, 0) 中第一個參數是相對於屏幕的水平位置，第二個參數是相對於屏幕的垂直位置。可調整其中任意一個值。

3. animate 緩慢回到頂部：

js:
$(window).scroll(function () {
    if($(window).scrollTop()>=100) {
        $("#toTop").fadeIn(400); /* 當滑動到不小於 100px 時，回到頂部圖標顯示 */
    }else {
        $("#toTop").fadeOut(400); /* 當滑動到小於(頁面被卷去的高度) 100px 時，回到頂部圖標隱藏 */
    }
});
$("#toTop").click(function () { 
    $("html, body").animate({scrollTop: 0}, 100); /* 持續時間為 100ms */
    return false;
});