卷頁腳是指網頁底部右下角的小圓點，當頁面滾動時，該小圓點會跟隨鼠標移動，當鼠標點擊時可以回到頁面頂部。在這篇文章中，我們將介紹如何使用 CSS3 實現卷頁腳。

首先，我們需要添加 HTML 代碼來創建卷頁腳的標記。我們可以在 body 元素的最后添加一個 div 元素，并在其中嵌套另一個 div 元素，如下所示：

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

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

首先，我們需要為外層 div 元素設置 position 屬性，這將使該元素成為相對定位元素。我們還需要為該元素設置 display 屬性為 none，這將使其在網頁加載時不可見。

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

接下來，我們使用偽元素 :before 和 content 屬性來添加卷頁腳的小圓點。我們為內層 div 元素設置 width 和 height 屬性，并將其 border-radius 屬性設置為 50%，這將使元素變成一個圓形。我們還將其 position 屬性設置為相對定位。

#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 代碼來實現卷頁腳的動態效果。我們需要檢測網頁的滾動事件，并根據滾動距離來控制卷頁腳的顯示和隱藏。

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";
}
});

以上就是實現卷頁腳的 CSS3 代碼和 JavaScript 代碼。我們可以根據網頁的具體需求來調整樣式和代碼。祝您實現成功！