網(wǎng)站如何制作“返回頂部”按鈕,節(jié)省用戶拖動(dòng)時(shí)間
2021-01-31368
如何在網(wǎng)站上創(chuàng)建“返回頁首”按鈕(帶有代碼)
當(dāng)網(wǎng)站布局過長時(shí),使用“返回頁首”按鈕,用戶直接將其單擊到網(wǎng)站頂部網(wǎng)頁返回頂部圖標(biāo)的制作,可以節(jié)省網(wǎng)站用戶的拖動(dòng)時(shí)間。
今天,我搜索了一位來賓,教您如何制作“返回頁首”按鈕,該按鈕可以自動(dòng)確定用戶網(wǎng)頁的位置。如果位于頂部,則不顯示“返回頂部”按鈕,如果不位于頂部,則顯示“返回頂部”按鈕。如下圖所示:
方法/步驟
在HTML頁面的底部添加以下代碼,以顯示“返回頂部”按鈕。 [如果您不懂HTML,可以學(xué)習(xí)html教程]
Δ
將以下CSS代碼添加到CSS樣式中,以控制“返回頁首”按鈕的樣式。 [如果您不了解CSS網(wǎng)頁返回頂部圖標(biāo)的制作,則可以學(xué)習(xí)CSS視頻教程]
#goTopBtn {位置:固定;行高:46px;文本對齊:居中;寬度:46px;底部:35px;高度:46px;光標(biāo):指針;背景:#fff;顯示:無;邊界半徑:6px;框陰影:0 0 8px rgba(0,0,0,0.13); font-size:22px; color:#999;}
在頁面底部放置以下jquery代碼,以控制何時(shí)顯示“返回頁首”按鈕以及何時(shí)隱藏該按鈕。
通過放置以上三段代碼,您可以在構(gòu)建自己的網(wǎng)站時(shí)創(chuàng)建“返回頁首”按鈕。如果您認(rèn)為按鈕圖標(biāo)的外觀不好,則可以下載“向上”圖標(biāo)來替換它。或?qū)W習(xí)我們的零基礎(chǔ)網(wǎng)站建設(shè)培訓(xùn)課程,以創(chuàng)建更多網(wǎng)站功能。