Top

怎麼幫 Blogger 加入回到頁面頂端的按鈕

| 作者

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


.1 本網站的「回到頂端」按鈕


有時候看到別的網站有一些小工具,我也會想要加入自己的網站中玩玩看,針對這個「回到頂端按鈕」,這裡要談的是一個重點-你的網站是否真的需要加入這個小工具。以我的網站來說,首要目標是希望讀者能夠多看看這個網站的文章,數據上就是停留時間長、翻閱頁數多。所以為了這個目標要盡量讓讀者能夠快速地接觸到文章連結。那這個思維要怎麼扯到「回到頂端」去呢?


現在請稍微瞄一下頁面右邊的熱門文章還有文章標籤,然後再回到原文來。如果是對正在閱讀的文章很有興趣的讀者,八成會留在原本文章繼續閱讀。反之,對原文沒興趣且被熱門文章吸引過去的讀者就會過去點擊,於是離開了現在在閱讀的文章。可是還有另外一種情況,那就是對原文跟熱門文章都頗有興趣的人,我估計一般人是會先把正在閱讀的文章讀完,再考慮下一步驟要去哪。而當這種讀者讀完原文之後,理論上都會在整個頁面的下端了,當他想要回頭看看剛剛吸引他的熱門文章,點一下「回到頂端按鈕」可是比用滑鼠滾輪滾半天還有效率。


用同樣的思維,因為目前行動版的頁面頂端並沒有什麼文章可以讓讀者點閱,所以暫時不加入這個小工具。接下來就來看程式碼吧,程式碼總共分4個部分,分別是載入 jQuery 函式庫、HTML 程式碼CSS 程式碼和 jQuery 程式碼。
(本文章程式碼來源是Yuxin文章,經過我的測試和調整,下面是適合 Blogger 的語法,強烈建議在修改 Blogger 範本前事先備份範本)



一、載入 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>


放完程式碼趕緊按儲存範本,到自己的網站去看看有沒有出現按鈕吧。