利用jQuery插件打造簡潔的回到頂部按鈕

這次，潛行者m給大家帶來一個比較實用的 jQuery 技巧，為你的網站添加一個純代碼畫出來的、簡潔美觀的回到頂部按鈕。這個按鈕的效果就是，當頁面滑動一段距離之后，就會浮現出來這個按鈕，點擊這個按鈕之后，就自動滾動到頂部。

點擊之后就會跳轉到頂部，然后這個按鈕平滑消失。與網上的相比，潛行者m版的是純代碼，加載速度更快，效果色彩控制好；代碼精簡，只有數條而已，拒絕大坨大坨的代碼。廢話不多說，下面就開始制作。

HTML 結構

我使用了 a 標簽作為這個結構，可能不太標準，但是比較方便。在 a 標簽中，內置了一個 span 標簽，用來顯示三角號。具體代碼如下：

對，你沒看錯，就這么簡單的一句代碼，直接在 a 標簽中，填寫一個三角號。剩下的就是使用 CSS 進行樣式控制。

CSS 代碼

上面這段代碼，定義了 a 標簽的外觀樣式，定義 display 為 block，這樣，我們才能指定它的 width 和 height。定義 position 為fixed，讓它固定在右下角。同時為它指定圓角，就是使用 border-radius 屬性，定于半徑為10px的圓角。

#gotop span{
display:block;
width:60px;
color:#dddddd;
}
#gotop span:hover{
color:#cccccc;
}
#gotop span{
font-size:40px;
text-align:center;
margin-top:4px;
}

上面這一段，就是定義了 span 標簽里面的三角號，至于如何打出這個“三角號”，使用搜狗輸入法，按下“Ctrl + Shift + z”，就會彈出搜狗的特殊字符，就可以找到了。這幾句代碼意思很簡單，就是定義了三角號的外觀樣式，同時制定了顏色變化，這是為了用戶體驗。最下面的 margin-top：4px，則是用來準確定位三角號，讓它居中顯示。

jQuery 代碼

具體的 jQuery 代碼如下，解析已經寫在注釋里面了：

怎么樣，簡單吧？就用這幾句代碼而已，就可以出現這個功能，而且可以方便的修改顏色、形狀、大小等。當然缺點也是有的，就是在IE6等過時的瀏覽器中，可能不會兼容，無法實現。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈