[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作

上一篇「快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計」留言 #18 Jean Hsiung 詢問：「我對您的"↑TOP"鈕比較有興趣，這個有沒有教學?」。

為何 WFU 要將 "回到網頁上方" 的這顆 Go Top 按鈕放在導覽列？主要是因為閱讀時，眼睛不喜歡螢幕上有浮動區塊，無論造成文字被遮住(例如「浮動側邊欄」的實例)、或是有個東西在某處飄，總是覺得怪怪的。個人能接受的浮動區塊，只有在網頁「最上方」以及「最下方」，因為這樣就感覺不出有浮動區塊，也是比較友善的使用者體驗。

所以將「↑ Top」按鈕放在浮動導覽列，算是個人偏好，不過也是有知名網站採用這樣的設計，例如「Feedly」，那麼以下就來看看這樣的功能如何實作。

一、錨點基本語法

如果是舊版的官方「網頁」小工具，就可輕易完成這件事。可惜幾個月前官方「網頁」小工具更新後，不再讓使用者擺語法，因此幾年前寫的「在 Blogger 水平功能選單（Menu Bar）使用語法產生動態效果」，這個方法目前已經失效。

現在導覽列想要像之前一樣使用圖片、或是語法效果，必須在後台直接改範本內容，那麼就必須了解一些基本 HTML 語法。

首先，「回到頂端」的錨點語法很簡單，就像下面這樣：

<a href="#">↑ Top</a>
藍色字串可改為自訂文字。

二、UL LI 語法

接下來需要了解的是 UL LI 的用法，基本教學與範例可參考「符號清單 ul li」。

Blogger 的導覽列，就是使用 ul li 來產生導覽列上面的各個項目。原本 ul li 應該是垂直排列，但是 Blogger 利用 CSS 設定每個 li 都是「向左浮動」(float: left)後，就能讓每個項目成為水平、且靠左排列。

Blogger 的導覽列語法，在網頁原始碼中大概長得像這樣：

<ul>
<li><a href="連結1">項目1</a></li>
<li><a href="連結2">項目2</a></li>
<li><a href="連結3">項目3</a></li>
</ul>
如果我們能在最後一個 </li> 之後、</ul>之前，插入一行 li 清單，並設定 CSS 為「向右浮動」，那麼就可以實現本文的效果了。

三、修改範本

有了以上概念後，我們可以開始進行實作。在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

導覽列的程式碼通常位於 "PageList1" 這個小工具，請在範本中搜尋 "PageList1" 這個字串，如下圖──



展開折疊區塊後，往下可找到如上圖紅框的 <ul> ～ </ul> 區間，接著在 </ul> 的前一行，插入以下程式碼：

<li style="float: right;">
<a href="javascript:;" onclick="$('html, body').animate({scrollTop: 0}, 500);" title="回到頂端">⇧TOP</a>
</li>

• 以上所有的字串("回到頂端"、"⇧TOP")都可自訂
• 藍色字串的 CSS 參數可造成「向右浮動」的效果
• 綠色字串使用 js 語法，可讓回到頂端的動作有動畫效果。
• 紅色參數 500 代表以 0.5 秒的時間滑動回到頂端，可自訂這個參數的大小，設得越大代表滑動時間越久。

四、浮動導覽列

這是本文最後、且最重要的一個步驟了，必須參考「讓部落格導覽列選單能浮動置頂」來安裝浮動導覽列的功能。

如果沒有安裝這個功能，那麼導覽列無法隨時出現在畫面上方，那麼這個「Go Top」按鈕，訪客也沒有半點機會可按，就等於形同虛設了，對吧！

五、一點補充

如果導覽列的項目很多，那就會發生沒有足夠空間擺放「Go Top」按鈕的窘境。除了想辦法去蕪存菁、刪減導覽列項目之外，我們能做的，就是另闢其他導覽管道。

如果修改範本能力強的話，可以參考 WFU BLOG 的標頭(或是「公佈欄」→「9.9 新版本網站標頭」的圖片備份)，將其他的導覽項目例如「文章列表」、「訂閱文章」等等放在標頭區塊，實作訣竅請見「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼」→「留言 #4」的回覆。

另外也可參考「Blogger 如何安裝兩個導覽列？」，畢竟製作兩個導覽列也是很常見的網頁技巧，當網站規模越來越大時，一個導覽列往往是不敷使用的。

Blogger 導覽列相關技巧：