2009年10月25日 星期日

新增一個回到上方的按鈕(Go To Top)


隨著邊欄的小工具(或稱自由欄位)越來越多的時候,頁面相對也會變得越來越長,這時滑鼠的利用也是很重要的,適時的加上一個按鈕,回到上方(Go To Top),讓閱讀者可以隨時回到最上方進行瀏覽,也是很方便的工具。

其實回到上方或是到頁面的最底端,鍵盤上的Home與End也可以完成,只是有的人或許不知道要利用鍵盤,這時增加一個回到上方的按鈕,或許可以增加瀏覽的便利度,有需要的人可以試看看。

首先當然要幫自己找個合適的圖案,可以利用Iconfinder網站,輸入"top"或是"go top"關鍵字,
例如下列網址,
http://www.iconfinder.net/search/?q=top


然後進入後台→版面配置→網頁元素→新增小工具→HTML/JavaScript 新增
然後輸入以下程式碼即可。
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='http://sites.google.com/site/lunfiles/box/gotop1.png'" src="http://sites.google.com/site/lunfiles/box/gotop0.png" onmouseout="this.src='http://sites.google.com/site/lunfiles/box/gotop0.png'"/></a>
其中
gotop1.png是大圖網址,我是用75*75px
gotop0.png是小圖網址,我是用30*30px
bottom:5px;right:5px;這是定位點,這可以自己調整,我定在右下方
圖片網址可以用你自己的空間網址替換

當滑鼠移到按鈕上方時他會變大,


一般時候則呈現小圖,


如果只想單純用一個圖代表,不想有縮放效果,語法如下:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://sites.google.com/site/lunfiles/box/gotop0.png" /></a>
如果是想在網站某地方加上這個回到上方文字連結功能,
則是利用
<a href='javascript:scroll(0,0)' title='Top'>Go Top</a>
放在html裡,你覺得適當的地方,譬如我在我的網頁最下方,就有一個Go Top的文字連結,就是放在模板的html裡的,不過這要你對後台的模板html配置較熟悉,建議再來使用會比較適合。

當然有的人也會使用展開/折疊小工具的方式,讓側邊欄簡潔些,不過我自己是沒有用過,可參考
Abin's Tech Note: 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)
這些都是可以利用的方式,跟大家分享。

參考來源:
Add Floating - Back To Top Button/Image In Blogger Blogs

16 則留言:

  1. 綸太郎的教學都很體貼新手呢^^

    回覆刪除
  2. 鼠标指时图像变大也可通过CSS实现(我首页的那张图片就是),但是老版本的IE就不支持了,兼容性比不上这个。

    回覆刪除
  3. To JoyceWu,其實寫得清楚些,是想說新手也不會怕踏入這塊園地吧。

    回覆刪除
  4. To希锐亚,你的方式如果做個定義也是不錯用的,想套用就套用,謝謝你的分享。

    回覆刪除
  5. 這個真的是太貼心了,感謝綸大的分享,在您的blogger總是能發現新鮮事,替您持續加油中!

    回覆刪除
  6. 現在油又漲價了,我會珍惜你的加油,再多多寫一些文章,跟大家分享,謝謝。

    回覆刪除
  7. 謝謝版主的教學,成功在blog上掛載了,另想請問「直接到底部」怎麼實現?

    回覆刪除
  8. 這個我就不會了,看網路上的介紹還蠻複雜的。

    回覆刪除
  9. 話說我發現回到top只能用一次耶
    在按第二次就不能了

    回覆刪除
  10. 一次就會到頂端了,為何還要按第二次,不懂,如果換頁,也是會執行的。

    回覆刪除
  11. 謝謝分享~我也有用在痞客邦的blog都沒問題呢~

    回覆刪除
  12. 請問~若是只想在文章中顯示~TO TOP的圖怎麼設定呢?
    因為如你教學的是,不管在哪個頁面都會出現。
    謝謝。

    回覆刪除
  13. 文章裡有提到,"如果是想在網站某地方加上這個回到上方的文字連結功能,"把程式碼放在文章裡,如果不要文字連結就把Go Top改成圖片語法即可。 <img src="圖片網址">

    回覆刪除
  14. 問一下為何使用了之後
    點擊後頁面會出現小框呢?
    每點一次就出現

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能