v 新增一個回到上方的按鈕(Go To Top) >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...