CSS如何設置返回頂部？假設我們現在有一個網頁，當用戶瀏覽頁面時，我們希望他們可以輕松地返回到頁面頂部。以下是如何用CSS實現此功能的方法：

.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
.scroll-to-top.show {
display: inline-block;
}
.scroll-to-top:hover {
transform: translateY(-5px);
}

以上是我們所需的CSS樣式。首先，我們定義一個“scroll-to-top”的類，用于表示返回頂部的按鈕。此類被設置為“fixed”定位，這意味著它的位置不會受到頁面滾動的影響。

接下來，我們給這個類設置了一個名稱為“show”的樣式，這個樣式可以用于在需要時顯示返回頂部的按鈕。另外，當用戶將鼠標懸停在按鈕上時，我們還添加了一個hover樣式，將返回頂部按鈕向上移動5個像素。

現在，我們將CSS與HTML結合使用，創建一個簡單的按鈕，并在需要時顯示它：

<button onclick="topFunction()" class="scroll-to-top" id="myBtn">
返回頂部
</button>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").classList.add("show");
} else {
document.getElementById("myBtn").classList.remove("show");
}
}
function topFunction() {
document.body.scrollTop = 0; 
document.documentElement.scrollTop = 0; 
}
</script>

我們在按鈕上添加了一個onclick事件，該事件將用戶返回到頁面頂部。此外，在JavaScript中，我們還為窗口滾動事件添加了“scrollFunction”函數，該函數檢查用戶是否在頁面上向下滾動。如果用戶滾動超過20個像素，我們將向按鈕添加“show”類，這樣就可以顯示該按鈕。

簡而言之，我們可以使用這些簡單的CSS和JavaScript代碼讓用戶方便地返回頁面頂部。希望這篇文章對您有所幫助！