如何在網(wǎng)站上創(chuàng)建“返回頁(yè)首”按鈕（帶有代碼）

當(dāng)網(wǎng)站布局過(guò)長(zhǎng)時(shí)，使用“返回頁(yè)首”按鈕，用戶直接將其單擊到網(wǎng)站頂部網(wǎng)頁(yè)返回頂部圖標(biāo)的制作，可以節(jié)省網(wǎng)站用戶的拖動(dòng)時(shí)間。

今天，我搜索了一位來(lái)賓，教您如何制作“返回頁(yè)首”按鈕，該按鈕可以自動(dòng)確定用戶網(wǎng)頁(yè)的位置。如果位于頂部，則不顯示“返回頂部”按鈕，如果不位于頂部，則顯示“返回頂部”按鈕。如下圖所示：

方法/步驟

在HTML頁(yè)面的底部添加以下代碼，以顯示“返回頂部”按鈕。 [如果您不懂HTML，可以學(xué)習(xí)html教程]

Δ

將以下CSS代碼添加到CSS樣式中，以控制“返回頁(yè)首”按鈕的樣式。 [如果您不了解CSS網(wǎng)頁(yè)返回頂部圖標(biāo)的制作，則可以學(xué)習(xí)CSS視頻教程]

#goTopBtn {位置：固定；行高：46px；文本對(duì)齊：居中；寬度：46px；底部：35px；高度：46px；光標(biāo)：指針；背景：#fff；顯示：無(wú)；邊界半徑：6px；框陰影：0 0 8px rgba（0，0，0，0.13); font-size：22px; color：＃999;}

在頁(yè)面底部放置以下jquery代碼，以控制何時(shí)顯示“返回頁(yè)首”按鈕以及何時(shí)隱藏該按鈕。

通過(guò)放置以上三段代碼，您可以在構(gòu)建自己的網(wǎng)站時(shí)創(chuàng)建“返回頁(yè)首”按鈕。如果您認(rèn)為按鈕圖標(biāo)的外觀不好，則可以下載“向上”圖標(biāo)來(lái)替換它?；?qū)W習(xí)我們的零基礎(chǔ)網(wǎng)站建設(shè)培訓(xùn)課程，以創(chuàng)建更多網(wǎng)站功能。