[教學] 在網頁(blogger)中加入回到網頁頂端的浮動按鈕

大家有沒有發現，當你瀏覽網頁到下方時，右下角會挑出一個向上的按鈕，點它之後，就會直接幫你回到頁首，要怎麼製作這個方便的功能呢？

在這次的教學中，我們會學習用到以下jQuery語法：

.animate()
.scrollTop()
.stop()

因為這個功能比較複雜一些，我們需要修改到blogger原本的程式碼。

STEP 1：下載網頁原始碼

下載後，強烈建議複製一份檔案作為原始檔，另一份作為修改，以免修改後有任何問題。

STEP 2：打開原始檔
最簡單的打開方式就是用記事本，另外為了排版的好看，也可以用Adobe Bracket來作為程式碼編輯的軟體，在這裡我用的是DreamWeaver。

STEP 3：插入jQuery語法
由於這個特效會使用到jQuery，因此我們必須匯入jQuery語法

首先利用「CTRL+F」，打開搜尋視窗，搜尋「/head」這段程式碼，然後在它的上方插入以下程式碼：

<!--Start:插入jQuery-->
  <script src='http://code.jquery.com/jquery-1.11.2.min.js'/>
  <!--End:插入jQuery-->
   <!--Start:插入TOP套件-->
  <script type="text/javascript">
$(function(){
    $("#gotop").click(function(){
        jQuery("html,body").animate({
            scrollTop:0
        },1000);
    });
    $(window).scroll(function() {
        if ( $(this).scrollTop() > 300){
            $('#gotop').fadeIn("fast");
        } else {
            $('#gotop').stop().fadeOut("fast");
        }
    });
});
</script>
   <!--END:插入TOP套件-->

像是這樣

這裡面其包含了兩段語法，
上面那段是引入jQuery。

  <!--Start:插入jQuery-->
  <script src='http://code.jquery.com/jquery-1.11.2.min.js'/>
  <!--End:插入jQuery-->

下面那段則是jQuery的功能，可以分成兩個部分：
第一個意思是當我點擊（click）右下角的按鈕（#gotop）時，請以動畫的方式（animate）在1000ms內跳到轉軸（scrollTop）最上方

<script type="text/javascript">
$(function(){
    $("#gotop").click(function(){
        jQuery("html,body").animate({
            scrollTop:0
        },1000);
    });

第二個部分則是指當我視窗捲軸（scroll）如果距離上面（scrollTop）超過300時，則淡入（fadeIn），否則就淡出（fadeOut）

    $(window).scroll(function() {
        if ( $(this).scrollTop() > 300){
            $('#gotop').fadeIn("fast");
        } else {
            $('#gotop').stop().fadeOut("fast");
        }
    });

STEP 4：插入HTML語法

HTML的語法非常簡單，一樣在網頁原始碼中尋找「/body」，然後在它的上面，插入這段語法

   <b:if cond='data:blog.isMobile'> 
 <b:else/>
 <div id='gotop' ><center>^</center></div> 
 </b:if>

像是這樣

這段程式碼就是我們的呈現出來的樣子，看到「^」了嗎？如果要改成其他文字，也可以直接在這裡些改，如果要改成圖片，可以用超連結的方式把圖片的超連結放在中間。

STEP 5：加入CSS語法
最後一個部分是要加入CSS語法，這個部分影響到的是我們「^」長的樣子，在文章中搜尋「/* Content」，然後插入以下這段程式碼：

#gotop {
    display: none;
    position: fixed;
    right: 40px;
    bottom: 40px;    
    padding: 10px 15px;    
    font-size: 20px;
    background: #F64359;
    color: white;
    cursor: pointer;
}

這裡display指一開始不要顯示，位置之所以選fixed是因為我們希望這個圖案是固定在螢幕的右下角，不會隨著捲軸而改變，放置的位置可以用right、bottom來調整，padding是用來填充的，這裡的寫法表示上下10px、左右15px，font-size是文字大小，background則是你想要圖案的顏色，color是文字的顏色，cursor表示當滑鼠移過去的時候會出去按鈕的符號。

如果你希望你的按鈕是圓形的，可以在CSS的語法最後，再加上一行

border-radius: 50px;

這樣就可以變圓形了喔！

寫到這裡，就大功告成了喔！

參考資料：
fundesigner、青椒的家