怎麼幫Blogger加入回到頁面頂端的按鈕 ~ 龍吳影的筆記本

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

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

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

用同樣的思維，因為目前行動版的頁面頂端並沒有什麼文章可以讓讀者點閱，所以暫時不加入這個小工具。接下來就來看程式碼吧，程式碼總共分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程式碼

<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>

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

原文章網址:http://k7451797.blogspot.tw/2014/08/go-top-button.html

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

龍吳影的筆記本