CSS內部樣式返回頂部

隨著Web應用程序變得越來越復雜，頁面滾動的高度也越來越多。為了提高用戶體驗，很多網站加入了返回頂部的按鈕。本文將介紹如何使用CSS內部樣式實現返回頂部的功能。

首先，我們需要在HTML頁面中添加一個返回頂部的錨點，以便我們的CSS代碼可以識別它：

<a href="#" id="back-to-top"></a>

然后，在樣式表中，我們可以使用以下代碼來實現返回頂部的效果：

#back-to-top {
position: fixed; /* 定位方式 */
bottom: 20px; /* 距離底部20像素 */
right: 20px; /* 距離右側20像素 */
font-size: 18px; /* 字體大小 */
background: #ccc; /* 背景顏色 */
color: #fff; /* 文本顏色 */
padding: 10px; /* 內邊距 */
border-radius: 50%; /* 圓角半徑 */
opacity: 0.5; /* 初始透明度 */
transition: opacity 0.3s ease-in-out; /* 動畫效果 */
}
#back-to-top:hover {
opacity: 1; /* 鼠標懸停時完全顯示 */
cursor: pointer; /* 顯示光標 */
}

以上代碼中，我們首先將返回頂部的錨點固定在頁面底部和右側，并設置了樣式來讓它看起來漂亮。接下來，我們使用了transition屬性實現了一個漸變的動畫效果，用于讓按鈕逐漸變得不透明，并使用了:hover偽類來實現鼠標懸停時的表現。

最后，在頁面底部附近添加以下JavaScript代碼，使得當用戶點擊返回頂部按鈕時，頁面可以平滑地滾回頂部：

document.getElementById("back-to-top").addEventListener("click", () =>{
window.scrollTo({
top: 0,
behavior: "smooth"
});
});

通過以上步驟，我們就可以在頁面中加入一個漂亮的返回頂部按鈕了，并可以使用CSS內部樣式來實現其樣式和動畫效果。