在我們日常開發過程中， 我們的頁面中為了使用戶有更好的體驗，都會有回到頂部的功能，最常見的就是使用JavaScript實現回到頂部程式碼，今天給大家詳細介紹下JavaScript簡單回傳頂部程式碼及註解說明！
最近做了一個排行榜頁面，分類較多，並且以圖文形式展示......最後頁面明顯過長了，用戶體驗自然不夠好。最後想著在頁面上方增加了頁面內跳轉導航，直接導航到本頁的分類命名錨塊。當然這就需要結合「回到頂部」功能來取得更好的體驗了。當然一般情況下首先還是要避免頁面過長，內容薄弱關聯性不夠的跳出率會很高。
下面就說下簡單的回傳頂部效果的程式碼實現，附註解說明。
方法一：用命名錨點選回到頂部預設的id為top的元素
html程式碼
<a href="#top" target="_self">返回顶部</a>
方法二：操作scrooll函數用來控制捲軸的位置（第一個參數是水平位置，第二個參數是垂直位置）
html程式碼
<a href="javascript:scroll(0,0)">返回顶部</a>
缺點：回傳效果是立即的，不符合一般瀏覽頁面的滾動感覺；
靜態固定於頁面底部，使用者不一定能看到。
#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>
缺點：滾動效果不平滑，且在頁面很長時點擊返回頂部，未向上到達頁面頂部無法再正常瀏覽頁面；
同上依舊是靜態固定於頁面底部，不一定能曝光在使用者面前。
##js程式碼
gotoTop(min_height){
gotoTop_html = '<p id="gotoTop">返回顶部</p>';
$("#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;:;:;:;:;:;:;:;:;:;}{:;:}{:;:;:;}總結：
總之，長頁面還是要盡量避免的，不可避免的情況下，加上「返回頂部」功能可能會帶給用戶相對好一點的體驗，希望對你有幫助！相關推薦：
#以上是JavaScript簡單回傳頂部程式碼及註解說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！
