CSS返回頂層功能是網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)中常用的一項(xiàng)技術(shù)。當(dāng)頁(yè)面滾動(dòng)到底部時(shí)，用戶需要點(diǎn)擊返回頂部按鈕回到頁(yè)面頂部。通過(guò)CSS代碼，我們可以輕松實(shí)現(xiàn)這項(xiàng)功能。

/*返回頂部按鈕樣式*/
.back-to-top {
display: none; /*初始狀態(tài)隱藏*/
position: fixed; /*固定在瀏覽器右下角*/
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #333;
color: white;
border-radius: 50%;
cursor: pointer;
z-index: 999; /*設(shè)置層級(jí)，保證按鈕顯示在頁(yè)面上方*/
}

以上樣式定義了返回頂部按鈕的基本樣式，包括按鈕的位置、大小、背景色、文本顏色和圓角等。

/*頁(yè)面向下滾動(dòng)時(shí)出現(xiàn)返回頂部按鈕*/
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var backToTopBtn = document.querySelector('.back-to-top');
if (scrollTop >200) {
backToTopBtn.style.display = 'block';
} else {
backToTopBtn.style.display = 'none';
}
}
/*點(diǎn)擊返回頂部按鈕時(shí)平滑滾動(dòng)到頁(yè)面頂部*/
function scrollToTop() {
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll >0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, currentScroll - (currentScroll / 8));
}
}
var backToTopBtn = document.querySelector('.back-to-top');
backToTopBtn.onclick = scrollToTop;

以上代碼實(shí)現(xiàn)了頁(yè)面向下滾動(dòng)時(shí)返回頂部按鈕的出現(xiàn)和隱藏，并在點(diǎn)擊按鈕時(shí)平滑地滾動(dòng)到頁(yè)面頂部。這樣，用戶就可以輕松返回頁(yè)面頂部，提高用戶體驗(yàn)。