2014年9月1日 星期一

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

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

Wayne Fu 0 A+
上一篇「快速回到頂端(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 導覽列相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP