網站中的回到頂部功能有益於增強用戶體驗，當一個頁面很長很長時，回到頂部是必不可少的。
回到頂部按鈕，可以使用圖片，背景圖，向量字體圖標，也可以使用代碼 css 產生。這裡使用 css 產生的方法。
css:
#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);
}對於回到頂部的多種方法總結如下：
1. 錨標記
# 包含了一個位置信息，默認的錨是 #top 也就是網頁的頂端。
方法：
1. 對回到頂部的按鈕使用錨標記，即a 標籤，回到頂部
2. 在頁面的頂部放置定位目標，，這裡的name 屬性和id 屬性的值比第一步驟中的href 屬性的值少一個#，name 和id 選擇一個即可。
缺點：
會在網址列裡多出 # 符號。
2. JavaScript Scroll 事件:
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;
});
