2015年3月20日

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

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

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


因為這個功能比較複雜一些,我們需要修改到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青椒的家

3 則留言:

  1. 這個真不錯,這樣訪客就不用一直滑滾輪了xD
    想請教一下版主,會一直置留最上方的 bar 的語法可以分享一下嗎??

    回覆刪除
  2. 回覆
    1. 您好,不知道是那個環節出了問題,我這邊測試是可以的,可能要麻煩你在照著步驟進行一次喔!
      若有問題歡迎再跟我說!

      刪除