CSS設(shè)置“回到頂部”按鈕是網(wǎng)頁開發(fā)中常用的技巧。當(dāng)頁面內(nèi)容滾動(dòng)很長時(shí)，用戶可以單擊該按鈕一次便回到頁面頂部，這是用戶體驗(yàn)的改進(jìn)。下面的代碼演示如何使用CSS來創(chuàng)建“回到頂部”按鈕，并將其附加到一個(gè)頁面中。

.back-to-top {
position: fixed;
bottom: 3rem;
right: 3rem;
padding: 0.5rem 1rem;
background-color: grey;
color: white;
border-radius: 2rem;
cursor: pointer;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
.back-to-top.active {
opacity: 1;
}

首先，我們?cè)O(shè)置了back-to-top類的定位，使其固定在頁面的右下角。然后，將其背景顏色和文本顏色設(shè)置為灰色和白色，通過設(shè)置邊框半徑來創(chuàng)建一個(gè)圓形的按鈕。最后，我們將光標(biāo)設(shè)置為指針并應(yīng)用漸變過渡效果。

我們還定義了.active類來控制按鈕的可見性。當(dāng)用戶滾動(dòng)頁面時(shí)，我們將其添加到back-to-top類中。因此，當(dāng)用戶滾動(dòng)到頁面的一定程度時(shí)，按鈕將變?yōu)榭梢姞顟B(tài)。

我們還需要一些JavaScript來實(shí)現(xiàn)回到頁面頂部的功能：

const backToTopButton = document.querySelector('.back-to-top');
window.addEventListener('scroll', () =>{
if (window.scrollY >300) {
backToTopButton.classList.add('active');
} else {
backToTopButton.classList.remove('active');
}
});
backToTopButton.addEventListener('click', () =>{
window.scrollTo({ top: 0, behavior: 'smooth' });
});

我們首先獲取back-to-top類的按鈕。然后，我們將滾動(dòng)事件監(jiān)聽器添加到窗口對(duì)象中。如果頁面的滾動(dòng)距離超過300像素，我們將向后添加.active類的按鈕，否則我們將其刪除。這就是我們?nèi)绾螌?shí)現(xiàn)“回到頂部”按鈕的可見性。

最后，我們還在back-to-top按鈕上添加了單擊事件監(jiān)聽器。當(dāng)用戶單擊該按鈕時(shí)，我們使用window.scrollTo()方法回到頁面頂部，并應(yīng)用平滑滾動(dòng)效果。