Related Posts Plugin for WordPress, Blogger...

2011年1月6日 星期四

回到頁首的固定按鈕(Go to top)

縱使 Blogger 每篇文章的頁尾,我在 Template 中都有使用 CSS 列一個 Button 可以回到頁首,但近來在回味以前的文章與照片時,發覺部份文章都"落落長",有時突然要返回頁首作其它瀏覽時,會發現有點不便(有點懶吧!),雖然這只要用滑鼠去點、或去拉就能返回的事,甚至可以利用鍵盤上的 Home 與 End 來實現,但總覺得不夠即時,剛剛試著在後台加入一段語法,讓版面右下角有個固定 icon 可以直接點回頁首,隨手就將它筆記下來,語法如下:(在設計/網頁元素/新增小工具/HTLM與JS 內加入)


<a style="display:scroll;position:fixed;bottom:5px;right:260px;" href="#" title="Top of this page"><img onmouseover="this.src='icon大圖位址'" src="icon小圖位址" onmouseout="this.src='icon小圖位址'"/></a>


一、Icon 圖是隨便在網路上找的(Free),感覺還可以,先試用看看,這邊有圖檔可以找 Iconfinder
二、語法內設定二張 icon ,一個大圖32*32px 另一為小圖16*16px,當滑鼠點到時,會顯示大圖,並顯示 title。
三、Icon 圖放置定位在:bottom:5px;right:260px; 可自行調整。
四、圖片位址一樣放置在自己的免費可外連空間內即可。
五、語法同樣適用於「回到頁尾」(#footer)或是「首頁」等其它連結…。
六、參考資料:BloggerStop.net0與1的謎詭世界