Blogger 新增回到最上層功能

最近有一個瀏覽網頁的習慣，當頁面捲到下方時，會搜索頁面中的「回到頂端」按鈕。其實越來越多網站會加入這個功能，例如T客邦...等大型的資訊網站...等。這些網站的瀏覽經驗讓我養成了按「回到頂端」的習慣，也許也有人發現了自己不小心養成了這個習慣...

一、載入jQuery函式庫
在範本裡的"<head></head>"標籤中任意位置加入以下程式碼，如此我們的網站就可以使用jQuery的功能了。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

二、加入HTML程式碼
在範本中搜尋<body>，找到之後在它的下面加入以下程式碼。因為不想在行動版顯示這個按鈕，所以加入了頭尾的判斷式。

<b:if cond='data:blog.isMobile'>  <!-- gotop在mobile不顯示的html語法 -->

<b:else/>

<div id='gotop' ><center>&#65087;</center>Top</div>  <!-- gotop的html語法 -->

</b:if>

三、加入CSS程式碼
在範本裡的"<head></head>"標籤之間加入以下程式碼。

<style type='text/css'>

<!--

#gotop { /* gotop的css語法 */

    z-index: 1;

    display: none;

    position: fixed;

    right: 90px;

    bottom: 25px;

    padding: 10px 15px;

    font-size: 15px;

    background: #777;

    color: white;

    cursor: pointer;

}

-->

</style>

想要調顯示的位置可以調right和bottom的值，right是指離頁面右邊邊緣多少距離；同理，bottom是指離底部多少距離。若是對CSS熟悉的話還可以進一步調整版型。

四、加入jQuery程式碼
在上面第一步的程式碼下方加入jQuery程式碼，這個功能是用來讓按鈕出現以及點下按鈕能夠回到頂端。藍字的430可以依照自己需求調整，指的是距離頁面上面邊緣多少距離。想要按鈕在頁面滾到越下方才出現數值就越大。

<script type="text/javascript">

$(function(){

    $("#gotop").click(function(){

        jQuery("html,body").animate({

            scrollTop:0

        },700);

    });

    $(window).scroll(function() {

        if ( $(this).scrollTop() > 430){

            $('#gotop').fadeIn("fast");

        } else {

            $('#gotop').stop().fadeOut("fast");

        }

    });

});

</script>