你的網頁有別人不得不看的絕世好文......)。
話說前幾天有個朋友正在學做網頁,問我說如何做一個:
「"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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JxCgOG0oIR_EkgGfEwpcg-2e3qAXh-IagwnRc75vs8IVlwldNmMyXl_b4CUuSqMq3_OgvOHUts-kjl97YYvxglp-XW1eFopA8BsoIAeK0uTl1UEeuS0RdVKojOwaxNaPNj2o90nIMT9c/s1600/Top.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7KbT38qUAAQ7RZRwnQE6wgUoZ1-QSkvAosQ722AuJuefeRN0XfE7uIDJbuvo8CUR_eNa8PoF9IiAsE3Lhx-PxOyHXHgc0UFDg6cKlkN736png5V8HiKOpFWSSF1z_kiFJ9fCYUb0QwgQ6/s1600/Top_medium.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7KbT38qUAAQ7RZRwnQE6wgUoZ1-QSkvAosQ722AuJuefeRN0XfE7uIDJbuvo8CUR_eNa8PoF9IiAsE3Lhx-PxOyHXHgc0UFDg6cKlkN736png5V8HiKOpFWSSF1z_kiFJ9fCYUb0QwgQ6/s1600/Top_medium.png'" /></a>
<!--BACKtoTOP-STOP-->
如有遇到 Coding 編碼問題無法使用,可使用這一段已編碼過的相同的 Code(圖片網址請自行置換):
<!--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-->
如果有懶人冰友,懶得去找圖片,也可以使用我目前使用的圖片(這是網路找的我覺得還不錯看的圖,圖片我已修過大小與去背):
加入 “回頂端(Back to Top)” 後範例
冰友們覺得很好用的話,請不吝回覆一下喔。 ^_^
感謝版主的分享,真的很好用~^^
感謝版主的分享,真的很好用,
有了這個按鈕會頂端就方便多了^^
You are welcome. 如有幫上忙我也開心。 ^^
不過我看過你的 Blog 沒放這個按鈕,也沒有文章分享,不知你放在哪個網站?
回板主 Pailing的網站在這邊 http://blog.yam.com/pailing
我也擺了按鈕,的確很實用^^ http://blog.yam.com/skb4935
我是用在天空部落的自定欄位^^"
http://blog.yam.com/pailing
已看到二位的網頁,蠻有內容的喔。而且你們的按鈕改做得蠻好看的。 ^^
實用就好,同是電腦玩家,二位有興趣可以加我的 G+、FB、Plurk 等社群網,方便交流相關知識喔。^^
(相關連結都在上方導覽列的 Link 看得到~~~)
你們二位好像認識是嗎?哈~~~ ^^
版主過獎了,是您不嫌棄啦,
我和電鍋是好朋友,是他推薦我來這裡取經的,
既然如此,我就不客氣地圈您了,
還有很多要學習的地方,請多指教~^^
相互交流學習就是開心的事,我也有許多須向大家學習之處。
Twitter 也可以加,雖然目前常用的是 G+、FB、Plurk.
BTW., 加你囉~~~ ^^
名字蠻好認的,不過 電鍋 就沒看到了~~~ ^^
哈~飯煮熟時記得要打開鍋蓋~安安喔~~~ ^^
樓上的笑話有梗,噗哈哈XD