JavaScript簡單回傳頂部程式碼及註解說明-js教程-PHP中文網

JavaScript簡單回傳頂部程式碼及註解說明

黄舟

發布： 2017-11-16 16:39:07

原創

3484 人瀏覽過

在我們日常開發過程中，我們的頁面中為了使用戶有更好的體驗，都會有回到頂部的功能，最常見的就是使用JavaScript實現回到頂部程式碼，今天給大家詳細介紹下JavaScript簡單回傳頂部程式碼及註解說明！

最近做了一個排行榜頁面，分類較多，並且以圖文形式展示......最後頁面明顯過長了，用戶體驗自然不夠好。最後想著在頁面上方增加了頁面內跳轉導航，直接導航到本頁的分類命名錨塊。當然這就需要結合「回到頂部」功能來取得更好的體驗了。當然一般情況下首先還是要避免頁面過長，內容薄弱關聯性不夠的跳出率會很高。

下面就說下簡單的回傳頂部效果的程式碼實現，附註解說明。

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(&#39;pageScroll()&#39;,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 = &#39;<p id="gotoTop">返回顶部</p>&#39;;
    $("#page").append(gotoTop_html);
    $("#gotoTop").click(
(){$(&#39;html,body&#39;).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程式碼中再加上一句隱藏第一方案。

總結：

總之，長頁面還是要盡量避免的，不可避免的情況下，加上「返回頂部」功能可能會帶給用戶相對好一點的體驗，希望對你有幫助！