當我們在網頁中向下滾動時，經常會遇到一個困擾：當頁面滾動到底部時，如何輕松地返回到頁面的頂部。這時，我們就需要回到頂層CSS（CSS back-to-top）來幫助我們解決這個問題。

.back-to-top {
/* 樣式：按鈕的位置和形狀 */
position: fixed;
bottom: 20px;
right: 20px;
display: none; /* 初始狀態為隱藏 */
/* 樣式：按鈕的樣式 */
background-color: #1A72BE;
color: white;
border: none;
border-radius: 50%;
padding: 10px;
font-size: 20px;
cursor: pointer;
z-index: 999;
}
.back-to-top:hover {
/* 樣式：hover狀態下的按鈕顏色 */
background-color: #1371AD;
}
/* 媒體查詢，當屏幕寬度小于768px時，調整按鈕的位置 */
@media screen and (max-width: 768px) {
.back-to-top {
bottom: 10px;
right: 10px;
}
}

如上所示，我們需要定義一個back-to-top類，并對按鈕的位置、樣式和hover狀態進行設置。在初始狀態下，back-to-top類的display屬性設置為none，即按鈕被隱藏。當用戶向下滾動頁面時，我們需要通過JavaScript來判斷是否滾動到了頂部。如果已經滾動到了頂部，就將back-to-top類的display屬性設置為none，即按鈕被隱藏。如果還沒有滾動到頂部，就將back-to-top類的display屬性設置為block，即按鈕顯示出來，供用戶點擊返回頁面頂部。

通過使用回到頂層CSS，我們可以輕松地解決滾動到頁面底部時返回頁面頂部的問題。并且通過媒體查詢，我們還可以為移動設備提供更好的用戶體驗。