Surfing The Keybord ⌨⌨⌨

很多時候網頁逛一逛卷軸都在最下面

滾滾輪還要滾很多次才會到最上面

不然就是要用滑鼠去移動卷軸

於是現行很多網頁都會有「返回頂部」的按鈕

以下就以JQuery的方式來實作

（這裡用div的方式開發，可以依自己需求調整）

Html:

<button id='totop' style='display:none; position:fixed; bottom:20px; right:0px; font-size: large'>^</button>
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
卷軸往下拉以顯示至頂按鈕.<br><br><br><br><br><br><br><br><br><br><br><br>
點下至頂按鈕會回到頂部.</div><br>

Script:

$(document).ready(function(){
    $("div").on("scroll", function() { 
        if ($("div").scrollTop() > 0) { 
            $("#totop").fadeIn();
        }
        else {
            $("#totop").fadeOut();
        }
    });
    $("#totop").on("click", function() {
    	$("div").animate({ scrollTop: 0 }, "slow");
    });
});

說明:

$("div").scrollTop() 這個主要是用來取得div這個element的scrollbar位置

在scrollbar的位置>0(不在頂端)的時候，回到頂部的按鈕會顯示

$("#totop").fadeIn();與$("#totop").fadeOut();是按鈕的顯示與隱藏(漸變)

$("div").animate({ scrollTop: 0 }, "slow"); 這個是回到頂部的功能

會以動畫緩慢往上的方式回到頂部

 

Write By Charley Chang 

---

新手發文，若有錯誤還請指教，
歡迎留言或Mail✉給我

本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 4.0 國際 授權條款授權.