CSS中的置頂效果可以幫助網站開發人員使其網站更加專業，并為用戶提供更好的用戶體驗。實現置頂效果有很多方法，其中一種非常流行的方法是使用CSS。

//HTML代碼
<button id="btn" class="btn">置頂</button>
//CSS代碼
#btn {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #007aff;
color: #fff;
font-size: 16px;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
#btn:hover {
opacity: 0.8;
}
//JavaScript代碼
window.onscroll = function() {
if (document.body.scrollTop >100 || document.documentElement.scrollTop >100) {
document.getElementById("btn").style.display = "block";
} else {
document.getElementById("btn").style.display = "none";
}
};
document.getElementById("btn").addEventListener("click", function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});

以上代碼中，我們首先在HTML中添加一個置頂按鈕。接下來，我們在CSS中為按鈕設置位置（position:fixed）、背景顏色、文本顏色等樣式，并將其初始狀態設置為“不可見”（display:none）。然后，我們編寫JS代碼，使用window.onscroll事件監測用戶是否已滾動頁面，當頁面滾動距離大于100px時，將按鈕設置為“可見”（display:block），否則設置為“不可見”（display:none）。當用戶單擊‘置頂’按鈕時，我們使用JavaScript將滾動條的位置設置為0，使頁面無法滾動，即實現了置頂效果。

在實際應用中，我們可以添加一些動畫效果，使置頂按鈕更加生動，例如添加‘hover’效果、在用戶單擊‘置頂’按鈕時添加動畫效果等。