1. 最簡單的靜態返回頂部，點擊直接跳轉頁面頂部，常見於固定放置在頁面底部返回頂部功能
方法一：用命名錨點擊返回到頂部預設的id爲top的元素
html代碼
<a href="#top" target="_self">返回頂部</a>
方法二：操作scrooll函數用來控制滾動條的位置（第一個參數是水平位置，第二個參數是垂直位置）
html代碼
<a href="javascript:scroll(0,0)">返回頂部</a>
缺點：返回效果是立即的，不符合一般瀏覽頁面的滾動感覺；
靜態固定於頁面底部，用戶不一定看得到。
2. 簡單的靜態返回頂部，用js模擬滾動效果上滑至頂部
js代碼
pageScroll(){
window.scrollBy(0,-100);
scrolldelay = setTimeout('pageScroll()',100);
sTop=document.documentElement.scrollTop+document.body.scrollTop;
(sTop==0) clearTimeout(scrolldelay);
}
html代碼
<a onclick="pageScroll()">返回頂部</a>
缺點：滾動效果不平滑，且在頁面很長時點擊返回頂部，未向上到達頁面頂部無法再正常瀏覽頁面；
同上依舊是靜態固定於頁面底部，不一定能曝光在用戶面前。
3. 動態按需加載返回頂部，css側邊屏幕絕對定位，結合簡單jQuery動畫實現更好體驗
js代碼
gotoTop(min_height){
gotoTop_html = '<div id="gotoTop">返回頂部</div>';
$("#page").append(gotoTop_html);
$("#gotoTop").click(
(){$('html,body').animate({scrollTop:0},700);
}).hover( (){$().addClass("hover");},
(){$().removeClass("hover");
});
min_height ? min_height = min_height : min_height = 600;
$(window).scroll((){
s = $(window).scrollTop();
( s > min_height){
$("#gotoTop").fadeIn(100);
}{
$("#gotoTop").fadeOut(200);
};
});
};
gotoTop();
css樣式代碼
{:;:;:75;:;:;:;:;:;:;:;:;:;}{:;:}{:;:;:;}
這種方法判斷頁面高度按需將“返回頂部”展示給用戶，用css樣式實現了屏幕絕對定位，藉助jQuery實現了更好用平滑的滾動效果。進一步考慮如果用戶設置了瀏覽器禁用js，那麼我們可以將第三方案結合第一方案方法一，禁用js後第三方案將不被用戶所見，未禁用的話我們在js代碼中再加上一句隱藏第一方案。
總之，長頁面還是要儘量避免的，不可避免的情況下，加上“返回頂部”功能可能會帶給用戶相對好一點的體驗。