新增一個回到上方的按鈕(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