卷頁(yè)腳是指網(wǎng)頁(yè)底部右下角的小圓點(diǎn)，當(dāng)頁(yè)面滾動(dòng)時(shí)，該小圓點(diǎn)會(huì)跟隨鼠標(biāo)移動(dòng)，當(dāng)鼠標(biāo)點(diǎn)擊時(shí)可以回到頁(yè)面頂部。在這篇文章中，我們將介紹如何使用 CSS3 實(shí)現(xiàn)卷頁(yè)腳。

首先，我們需要添加 HTML 代碼來(lái)創(chuàng)建卷頁(yè)腳的標(biāo)記。我們可以在 body 元素的最后添加一個(gè) div 元素，并在其中嵌套另一個(gè) div 元素，如下所示：

<div id="scroll-icon-wrapper">
<div id="scroll-icon"></div>
</div>

其中，外層 div 元素的 id 為 “scroll-icon-wrapper”，內(nèi)層 div 元素的 id 為 “scroll-icon”（也可以使用其他名稱）。接下來(lái)，我們使用 CSS3 代碼來(lái)添加樣式。

首先，我們需要為外層 div 元素設(shè)置 position 屬性，這將使該元素成為相對(duì)定位元素。我們還需要為該元素設(shè)置 display 屬性為 none，這將使其在網(wǎng)頁(yè)加載時(shí)不可見(jiàn)。

#scroll-icon-wrapper {
position: fixed;
right: 30px;
bottom: 30px;
display: none;
}

接下來(lái)，我們使用偽元素 :before 和 content 屬性來(lái)添加卷頁(yè)腳的小圓點(diǎn)。我們?yōu)閮?nèi)層 div 元素設(shè)置 width 和 height 屬性，并將其 border-radius 屬性設(shè)置為 50%，這將使元素變成一個(gè)圓形。我們還將其 position 屬性設(shè)置為相對(duì)定位。

#scroll-icon:before {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #000;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
#scroll-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
position: relative;
cursor: pointer;
}

最后，我們使用 JavaScript 代碼來(lái)實(shí)現(xiàn)卷頁(yè)腳的動(dòng)態(tài)效果。我們需要檢測(cè)網(wǎng)頁(yè)的滾動(dòng)事件，并根據(jù)滾動(dòng)距離來(lái)控制卷頁(yè)腳的顯示和隱藏。

window.addEventListener("scroll", function() {
var scrollPosition = window.scrollY;
var scrollIconWrapper = document.getElementById("scroll-icon-wrapper");
if(scrollPosition >500) {
scrollIconWrapper.style.display = "block";
} else {
scrollIconWrapper.style.display = "none";
}
});

以上就是實(shí)現(xiàn)卷頁(yè)腳的 CSS3 代碼和 JavaScript 代碼。我們可以根據(jù)網(wǎng)頁(yè)的具體需求來(lái)調(diào)整樣式和代碼。祝您實(shí)現(xiàn)成功！