2013年8月29日

[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計

A+

(Pic from: shimivn.blogspot.com)
「回到上方」的按鈕是很常見的網頁設計,且 code 不難寫。那麼特地撰寫本文的目的為何呢?其實主要是拜讀了 +Bin Ye 的「改善 Google Blogger 返回頂部按鈕的使用體驗」覺得很有道理,因此雖然未使用這個按鈕(已經有「置頂導覽列選單」了),不過這個友善的使用者體驗設計,值得把他做出來,讓有需要的站長自取,因為本站的作品基本上也是朝使用者體驗的方向在前進。



一、符合使用者體驗的設計要點

以下所提的各種效果,可先請參考這個 DEMO 網頁對照:



1. 按鈕的位置

「回到頂端」按鈕很常見的位置放在頁面的右下角,不過根據 Bin Ye 原文及留言,使用者視線的焦點大致落在螢幕中央的水平線(也就是 1/2 處),而滑鼠指標大致會落在螢幕中央約 2/3 的區域。

經觀察自己實際操作滑鼠的模式,的確不自覺會將鼠標落在畫面中央水平線稍微下面一點之處,那麼「回到頂端」按鈕如果放在螢幕 1/2 ~ 2/3 這個高度區間,可減少滑鼠移動的距離,對於使用者而言將是最方便的操作。


2. 透明度

這個按鈕可能會遮住一些文字,因此有必要加入透明度的設計,當滑鼠經過按鈕時再取消透明。


3. 出現時機

畫面尚未捲動時沒必要回到頂端,因此用 jqeury 監測捲動事件,當畫面開始捲動後才出現按鈕。


4. 滑動效果

直接跳到頂端稍嫌粗魯,用 jquery 內建的動畫效果,可以達到簡單的滑動效果。



二、安裝程式碼

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 以 Blogger 的操作為例,到後台「範本」→「編輯 HTML」,如果範本裡已經安裝過 jqeury 的話(需至少 1.7 以上的版本),就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串);如果沒安裝過 jquery,請搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

2. 接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:



3. 如果覺得預設效果就很好了,那麼請直接存檔即可;想要修改參數的話,請依以上程式碼行號參考以下說明:

G:想使用自訂圖案,請置換藍字圖片網址。

H:紅字 "1/2" 代表按鈕無論螢幕在任何情況、解析度下,都會出現在約 1/2 的高度,建議填入 1/2 ~ 2/3 之間的數值。

I:按鈕距離螢幕右邊界的 px 值

J:按鈕的透明度可填入 0 ~ 1 的數字,0 代表完全透明,1 代表不透明。

K:可自訂捲動的速度,綠字 500 代表以 0.5 秒的速度捲到頂端,若填入 1000 代表 1 秒。

E:title 裡面的中文字串可改為自訂的提醒文字




三、小結

如果對 js 熟悉的話,本文的程式碼還可以有非常多的應用,例如自行修改加入其他按鈕,可快速跳轉到留言區、自訂錨點的功能,或加入幾個常用的社交分享按鈕等等。由於 WFU BLOG 尚未考慮使用這些功能,因此要請自行研究了。


更多 Go Top 按鈕語法:

37 則留言:

  1. 我改好了,原本我是裝隔壁棚的back to top語法,但是當我放大瀏覽比例,箭頭壓在側欄連結上就會失效,所以我改這組解決問題了,謝謝!

    回覆刪除
  2. <2970121237338844195>(以上內容請勿刪除,從括號之後開始留言)不客氣~看來 bigsishead 可以成為我的 demo 網頁 :D

    回覆刪除
  3. <8986892818816158933>(以上內容請勿刪除,從括號之後開始留言)
    嘻嘻,真的耶!我現在改的語法出處都是wayne這裡耶!即便之前有用別棚的語法,但找到可以用的我都改成wayne的了!我是前線實驗場,哈哈!

    回覆刪除
  4. 作者已經移除這則留言。

    回覆刪除
  5. <5405108681405732247>(以上內容請勿刪除,從括號之後開始留言)T行的程式碼scrollTop: 0 改成 scrollTop: $body.height() 這樣就行了

    回覆刪除
  6. <8611306874550544387>(以上內容請勿刪除,從括號之後開始留言)
    想要同時放上下兩個鈕是有可能的嗎?因為我放兩組語法上去,原本的就不見了。

    回覆刪除
  7. <8611306874550544387>(以上內容請勿刪除,從括號之後開始留言)

    太感謝W大了 不過也跟下面同問 如果上下並存可以嗎? 哈哈 謝謝W大!!

    回覆刪除
  8. <4290363088486270762>(以上內容請勿刪除,從括號之後開始留言)@Pan Kuan, @林上堯,
    要複製兩組一樣的程式碼,如果看得懂js, 變數名稱及id改一改就行. 如果要比較有效率的執行程式碼, 得改寫一下 js, 等另外找時間才能排進這個 case 了. :)

    回覆刪除
  9. <1012118829121381514>(以上內容請勿刪除,從括號之後開始留言)

    謝謝W大 另外請教這個鈕是不是IE會沒作用...

    回覆刪除
  10. <1012118829121381514>(以上內容請勿刪除,從括號之後開始留言)

    另外還想請問這個地方想加底色要如何加呢?

    [img]https://googledrive.com/host/0B4MXs1jb3Y99YXdNZnRYaXd2M2s/001.jpg[/img]

    回覆刪除
  11. <4349064319006949851>(以上內容請勿刪除,從括號之後開始留言)想要改頁面配置的CSS,建議參考這一篇 Google Chrome 開發人員工具 , 先找出要改的區塊的 class 或 id, 就能改 CSS 了.

    回覆刪除
  12. <6617054692962691022>(以上內容請勿刪除,從括號之後開始留言)謝謝回報,IE的確執行有問題。

    已經修改內文的程式碼,請重新安裝程式碼即可。

    回覆刪除
  13. <987570635242824730>(以上內容請勿刪除,從括號之後開始留言)
    ok,修改完畢,ie可以正常運作了,也是因為我今天才有機會知道原本的語法ie真的不能動~~~

    回覆刪除
  14. <5180591892873582427>(以上內容請勿刪除,從括號之後開始留言)這篇真的沒測到IE,所以有問題歡迎回報 ^^

    回覆刪除
  15. 請問一下,有辦法添加什麼語法讓這組功能只出現在網路版而行動版不要出現嗎?謝謝!

    回覆刪除
  16. <9041753765380063193>(以上內容請勿刪除,從括號之後開始留言)你是指判斷式的語法吧,這幾天研究一下,整理成一篇好了~

    回覆刪除
  17. 可以請問一下 為何無限捲頁跟back to top的功能無法同時顯示呢?
    無限捲頁功能是參閱http://pulipuli.blogspot.tw/2011/06/blogger-infinite-scroll.html?showComment=1398331255551#c3173013020852896946

    回覆刪除
  18. <4079357996326319347>(以上內容請勿刪除,從括號之後開始留言)那是別人的程式碼我就不清楚了,也許他的程式跟這個程式會打架,需要我花時間幫你看的話,一樣請用「諮詢服務/提案合作」的聯絡表單與我聯繫。

    回覆刪除
  19. XDD 版大 我瞎貓碰上死耗子
    後來仔細看了語法發現jquery/1.8.2後面的數字不同
    就嘗試把數字改一樣的就都出現啦

    回覆刪除
  20. <844112935480574179>(以上內容請勿刪除,從括號之後開始留言)不客氣 :)

    回覆刪除
  21. 如果這個一樣要套用到自適應範本,在多少寬度以下會消失,要怎麼設定呢?

    回覆刪除
  22. <2926839735224542027>(以上內容請勿刪除,從括號之後開始留言)go top 按鈕只有設定特定高度消失,沒有人會設計特定寬度消失吧~~XD
    你直接安裝就行了,自適應範本應該不影響這個按鈕。

    回覆刪除
  23. <5556000047762828140>(以上內容請勿刪除,從括號之後開始留言)

    我怕在行動面板上會擋到文章嘛 =3=

    我很吹毛求疵

    回覆刪除
  24. <4316275090335682169>(以上內容請勿刪除,從括號之後開始留言)我也不喜歡浮動區塊擋到版面,所以除了導覽列,我沒有裝浮動區塊。也許你可以參考我 go top 按鈕的位置,自己找幾個地方放~

    回覆刪除
  25. 請問一下Wayne大,如果希望只有在往下滑動頁面或是往上滑動頁面才顯示按鈕,我需要如何修改?先謝謝你喔!

    回覆刪除
  26. <4339871071305237458>(以上內容請勿刪除,從括號之後開始留言)這樣的功能必須另外寫才行,目前只能當作客製的案子了~

    不過這個構想是不錯的,有可能改成友善的使用者體驗設計。如果是「只有在往下滑動頁面或是往上滑動頁面才顯示按鈕」→ 我怕你永遠按不到這顆按鈕,可以自行想像、模擬看看。

    如果改成「頁面捲動時按鈕消失,不捲動時按鈕才出現。」那麼這顆按鈕就按得到,但視覺效果差一點。所以要如何最佳化需要進一步的構思。

    回覆刪除
    回覆
    1. 因為我的想法是想說能不能安裝兩個語法,當使用者往下滑動時顯示向上箭頭,往上滑動時顯示向下箭頭,要置頂或是到最底下留言板,就看怎麼配置動作要怎麼搭配顯示置頂或到最底下,能讓使用者更直覺!(不知這樣執行行不行的通,,,)呵呵!剛好昨晚看到這個網頁http://www.ettoday.net/news/20140826/393758.htm?from=fb_et_news突然想到有安裝你的這篇,想說請教你一下!謝謝你的回覆喔!

      刪除
  27. <5469718896219489409>(以上內容請勿刪除,從括號之後開始留言)原來你是這個意思,這跟你上面留言的意思還差滿多的...XD

    能描述出來的動作就能寫的出來,不少網站都有使用多個浮動按鈕的功能,無論是 go top、go down,只要有錨點的地方都能定位,總之都是需要按客製需求才能寫就是了。

    回覆刪除
    回覆
    1. 呵呵歹勢歹勢!謝謝你喔!

      刪除
  28. 你好,我發現我安裝這個功能,jquery會跟我原有的prototype相沖,我的導覽列會點不出來,請問這有辦法解決嗎? 我的部落格http://www.acgxi.tk/
    其實我對您的"↑TOP"鈕比較有興趣,這個有沒有教學?XD
    謝謝

    回覆刪除
  29. <9176666456832629697>(以上內容請勿刪除,從括號之後開始留言)[quote]jquery會跟我原有的prototype相沖,我的導覽列會點不出來[/quote]既然你提到了跟 "prototype" 相沖這件事,那我假設你是懂一點語法的,會相衝就是因為使用了共同的變數 $,那麼你可以改 D 行為:

    (function ($) {

    改 AM 行為:

    } )(jQuery);

    這樣就可避免 $ 成為全域變數了。

    [quote]我對您的"↑TOP"鈕比較有興趣[/quote]剛好我過一陣子會寫這個功能,所以記得訂閱 RSS 或 Email,就不會錯過這篇了!

    回覆刪除
  30. 請問是否能設定為 每次重新整理都會跟換不同的圖案
    像是這個網站 http://www.comicat.org/discuss-1.html
    他每次整理 右下角的TOP圖案都會改變,不知道該如何才能出現這樣的效果呢??

    回覆刪除
  31. <3590122494026301608>(以上內容請勿刪除,從括號之後開始留言)這樣的需求,屬於客製案子的範圍喔~

    回覆刪除
  32. 回報一下:

    在觀看這篇文章的DEMO網頁時,按下第一次TOP之後,無法正常往下滑動閱讀~(使用chrome閱讀)

    不知道你那邊是否正常?

    回覆刪除
  33. <7821988811592485443>(以上內容請勿刪除,從括號之後開始留言)謝謝回報狀況,已修復~

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。