在網頁設計中，返回頂部的功能一直是必不可少的。今天，我們將介紹一種實現純CSS點擊按鈕返回頂部的方法。

首先，我們需要創建一個按鈕，并設置其樣式：

<button id="topButton">返回頂部</button>
#topButton {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #EAEAEA;
padding: 10px;
border-radius: 5px;
border: none;
color: #333;
font-size: 16px;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease-in-out;
}

這里我們設置了button的id為topButton，通過CSS設置了其位置、樣式、以及動畫效果。其中，“opacity: 0”和“transition: all 0.3s ease-in-out”分別是為了使按鈕在頁面加載時隱藏，并增加動畫效果。

接下來，我們需要添加一些JavaScript代碼來實現點擊按鈕返回到頁面頂部的功能：

<script>
window.addEventListener('scroll', function() {
var topButton = document.getElementById('topButton');
if (window.pageYOffset >300) {
topButton.style.opacity = "1";
} else {
topButton.style.opacity = "0";
}
});
var topButton = document.getElementById('topButton');
topButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
});
</script>

這段JavaScript代碼實現了兩個功能：

1. 當頁面滾動超過300像素時，按鈕將出現；
2. 當用戶點擊按鈕時，頁面將以平滑的方式滾動到頂部。

通過上述的CSS和JavaScript代碼，我們實現了純CSS點擊按鈕返回頂部的功能。這種方法不僅簡單易用，還能提高頁面的用戶體驗。