CSS回到頂部怎么寫 在網頁中，為了提高用戶使用體驗，我們經常需要添加回到頂部的功能。本文將為大家介紹如何使用CSS實現回到頂部功能。 首先，在HTML頁面中，我們需要添加一個按鈕，用來實現點擊回到頂部的功能。代碼如下：

<button id="to-top">回到頂部</button>

然后，通過CSS的樣式控制按鈕的位置和樣式。代碼如下：

#to-top{
position: fixed;   /* 回到頂部按鈕位置固定 */
right: 20px;      /* 按鈕距離屏幕右側的位置 */
bottom: 20px;     /* 按鈕距離屏幕底部的位置 */
display: none;    /* 初始時按鈕不顯示 */
width: 50px;      /* 按鈕寬度 */
height: 50px;     /* 按鈕高度 */
line-height:50px; /* 按鈕內部文本垂直居中 */
text-align:center;/* 按鈕內部文本水平居中 */
background-color: #333; /* 按鈕背景顏色 */
color: #fff;      /* 按鈕文本顏色 */
border-radius: 50%;     /* 按鈕圓角 */
cursor:pointer;  /* 鼠標移入按鈕變為手型 */
}
#to-top:hover{
background-color: #555; /* 鼠標移入按鈕時背景顏色變化 */
}

接下來，我們需要添加JavaScript代碼，使得當用戶滾動屏幕時，按鈕會自動出現或者隱藏。代碼如下：

window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// scrollTop表示滾動條滾動的距離
if(scrollTop >= 200){
// 當滾動條滾動距離大于等于200時，按鈕顯示
toTop.style.display = 'block';
}else{
// 當滾動條滾動距離小于200時，按鈕隱藏
toTop.style.display = 'none';
}
}

最后，我們需要實現點擊按鈕后回到頂部的功能。我們可以使用JavaScript中的scrollTo()方法實現。代碼如下：

toTop.onclick = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 獲取當前滾動條滾動的距離
var timer = setInterval(function() {
scrollTop -= 20;
// 每20毫秒讓滾動條scrollTop減去20，實現平滑回到頂部的效果
if(scrollTop<= 0){
// 當scrollTop小于等于0時，停止定時器
clearInterval(timer);
}
window.scrollTo(0, scrollTop);
// 將滾動條滾動到指定位置
}, 20);
}

通過以上的步驟，我們就可以實現一個簡單的回到頂部的功能啦！