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

這次，潛行者m給大家?guī)硪粋€比較實用的 jQuery 技巧，為你的網(wǎng)站添加一個純代碼畫出來的、簡潔美觀的回到頂部按鈕。這個按鈕的效果就是，當(dāng)頁面滑動一段距離之后，就會浮現(xiàn)出來這個按鈕，點擊這個按鈕之后，就自動滾動到頂部。

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

HTML 結(jié)構(gòu)

我使用了 a 標(biāo)簽作為這個結(jié)構(gòu)，可能不太標(biāo)準(zhǔn)，但是比較方便。在 a 標(biāo)簽中，內(nèi)置了一個 span 標(biāo)簽，用來顯示三角號。具體代碼如下：

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

CSS 代碼

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

jQuery 代碼

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

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

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈