【Blogger技術】jQuery GoTop 按鈕讓網頁快速回到最上方

在Web上相當實用的jQuery GoTop 按鈕，在行動裝置上亦是十分常見，按下按鈕後可以讓網頁快速地滑動到最上方，讓使用者節省不少往上滑的時間!

jQuery GoTop 按鈕

常駐選單(Fixed Top Navbar )在行動裝置上大量出現以前，
電腦上的網頁在設計瀏覽比較大量內容區塊時，多半會用jQuery製作一個GoTop按鈕，按下去後會讓右方卷軸滑動回到最上面，因為通常一個網站的選單都是設計在最上方。

當然其實也可以用我之前介紹過的滑動後浮動式固定選單讓最上方的選單自動常駐在上方，即使在觀看文章時也能隨時切換選單內容，此時GoTop按鈕的效果就沒這麼明顯了。

不過，有一個GoTop按鈕仍然是非常方便，尤其是在文章看到下面忽然想看一下上面寫的東西時，就很實用了!

記得你的部落格上方要有載入jQuery，類似下面這種東西
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>;

---

Javascript 程式碼

<script type="text/javascript">
$(function() {
    /* 按下GoTop按鈕時的事件 */
    $('#gotop').click(function(){
        $('html,body').animate({ scrollTop: 0 }, 'slow');   /* 返回到最頂上 */
        return false;
    });
    
    /* 偵測卷軸滑動時，往下滑超過400px就讓GoTop按鈕出現 */
    $(window).scroll(function() {
        if ( $(this).scrollTop() > 400){
            $('#gotop').fadeIn();
        } else {
            $('#gotop').fadeOut();
        }
    });
});
</script>   

Html

<!-- 記得要把按鈕放到網頁上, 否則它不會出現 -->
<a href="https://www.blogger.com/blogger.g?blogID=2031514508322140995#" id="gotop">
   <i class="fa fa-angle-up"></i>
</a>

CSS

#gotop {
    position:fixed;
    z-index:90;
    right:30px;
    bottom:31px;
    display:none;
    width:50px;
    height:50px;
    color:#fff;
    background:#33b5e5;
    line-height:50px;
    border-radius:50%;
    transition:all 0.5s;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
#gotop :hover{
    background:#0099CC;
}

---

運作原理是利用jQuery在按鈕上綁定兩個事件，按下後會讓卷軸滑到最上方，還有偵測當卷軸從上往下滑超過某個距離後讓按鈕出現，反之滑回頂上時要再次把按鈕隱藏。

技巧與製作滑動後浮動式固定選單類似，都是偵測螢幕變化去做某些事情。

可以讓按鈕呈現半透明以避免遮住後方內容。

▼另外如果想讓按鈕上的箭頭是往上的符號，記得像jQuery一樣載入font-awesome即可出現。

Font Awesome 官網

【BLOGGER技術】滑動後浮動式固定選單,超簡單!
【BLOGGER技術】只用CSS做出美麗的漸層顏色效果