如何在網頁中做一個「"TOP（回頂端）" （Back to Top，回網頁頂端），且可以放大的浮動圖片按鈕」？

您是否看過許多網頁長長的一頁，作者只顧自己放自己要放的物件及文章，卻完全不顧讀者想回到網頁最頂端，得按著 Browser 的捲軸按到手酸？？我想這一類的網頁，可能讀者最想 "按" 的地方不是你的文章，而是 "X" 這個按鈕吧...... （除非
你的網頁有別人不得不看的絕世好文......）。

話說前幾天有個朋友正在學做網頁，問我說如何做一個：
「"TOP（回頂端）" （Back to Top，回網頁頂端），且可以放大的浮動圖片按鈕」。朋友之前曾爬了些網路文章，試著改 CSS + HTML 語法，卻都無法成功。

話說此 Code (小語法) 已行之有年了，我也很久沒在用這 Code 了，是一段蠻簡易的語法。在回覆給朋友後，經朋友一用就 OK. 了。今天順便把這一段 Code 分享在 Blog 吧，相信有人會需要用到這一段小語法的。

注意：
聽說有些人不慎引用較花俏的 JS 而導致中毒、網頁害別人中毒等等。事實上，這段 Code 完全不須呼叫額外的外部 Java Script，因為這可能會讓網頁速度變慢或中毒。當然，如果喜歡更花俏的人，也可以自己寫 JS or 引用可信任的 JS.

〔語法分享〕
1. 將下列這一段 Code，放置在 </body> 之前/上方，或者放置在你想出現的位置， <body> 與 </body> 之間即可。

2. Blogger 的 Users, 可以開啟：
"設計" => "網頁元素" => "新增小工具" => "基本" => "HTML/JavaScript"，然後貼上這一段語法即可。當然，功力較高的冰友們，也可以自行修改 HTML 後再上載 XML file 即可。

3. Wordpress & the Others 的 Users，可自行引用此段語法於合適的位置。

4. 藍色部份：可自行調整圖片按鈕位置。

5. 紅色部份：不可移除。否則在 FF(FireFox) 或 IE 下使用時，點選圖示後會產生虛線外框。所以我特別加了這部份語法以去除圖片虛線外框。

6. 橘色部份：可自行使用自己喜歡的圖片，須用二張圖片，一為放大前圖片，一為放大後圖片。

複製下列語法並修改為自己喜歡的圖片者，可使用這一段：

<!--BACKtoTOP-START-->

<a style="display:scroll;position:fixed;bottom:0px;right:5px;" href="#" title="" onFocus="if(this.blur)this.blur()">

<img alt='' border='0' onmouseover="this.src='放大後圖片網址'" src="放大前圖片網址" onmouseout="this.src='放大前圖片網址'" /></a>

<!--BACKtoTOP-STOP-->

直接套用筆者的圖片者，可使用這一段：

<!--BACKtoTOP-START-->

<a style="display:scroll;position:fixed;bottom:0px;right:5px;" href="#" title="" onFocus="if(this.blur)this.blur()">

<img alt='' border='0' onmouseover="this.src='http://4.bp.blogspot.com/-AKP9Gl_ets0/TmzrRBJPg_I/AAAAAAAADpY/M3KVvsDNJbA/s1600/Top.png'" src="http://1.bp.blogspot.com/-_gUa3K1wDNo/TmzrHROhBVI/AAAAAAAADpU/vOKm_7zL8DQ/s1600/Top_medium.png" onmouseout="this.src='http://1.bp.blogspot.com/-_gUa3K1wDNo/TmzrHROhBVI/AAAAAAAADpU/vOKm_7zL8DQ/s1600/Top_medium.png'" /></a>

<!--BACKtoTOP-STOP-->

如有遇到 Coding 編碼問題無法使用，可使用這一段已編碼過的相同的 Code（圖片網址請自行置換）：

&lt;!--BACKtoTOP-START--&gt;

&lt;a style="display:scroll;position:fixed;bottom:0px;right:5px;" href="#" title="" onFocus="if(this.blur)this.blur()"&gt;

&lt;img alt='' border='0' onmouseover="this.src='放大後圖片網址'" src="放大前圖片網址" onmouseout="this.src='放大前圖片網址'" /&gt;&lt;/a&gt;

&lt;!--BACKtoTOP-STOP--&gt;

如果有懶人冰友，懶得去找圖片，也可以使用我目前使用的圖片（這是網路找的我覺得還不錯看的圖，圖片我已修過大小與去背）：