CSS Top Button

一、基本介紹

CSS Top Button是一種常見的網頁滾動條按鈕，可以幫助用戶在網頁中隨意上下滑動，提升用戶的使用體驗。這個按鈕固定在頁面的右下角，當用戶向下滑動頁面時，它將自動出現，當用戶點擊它時，它將幫助用戶快速返回到頁面的頂部。本文將介紹如何通過CSS和JavaScript來創建這個功能。

二、CSS實現

首先，我們需要創建一個HTML結構：一個帶有id的，以及一些按鈕圖標。最常見的圖標是一個箭頭，指向頁面頂部。

  <div id="topButton">
    <img src="top.png" alt="top button">
  </div>

這裡我們使用id=”topButton”將與CSS和JavaScript腳本連接起來。

接下來，我們使用CSS將按鈕樣式設置為固定在頁面的右下角，當頁面高度大於按鈕高度時才顯示：

  #topButton {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
  }

  #topButton img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: #e5e5e5;
    transition: all 0.3s ease-in-out;
  }

  #topButton:hover img {
    transform: scale(1.2);
  }

首先，我們將#topButton的display設置為none，使按鈕最開始不可見。接下來，我們使用CSS position屬性將按鈕固定在頁面的右下角。使用z-index屬性將按鈕放在其他元素的上方。最後，我們將所有按鈕圖標的CSS樣式設置為居中、有圓角，且在懸停時變大。

三、JavaScript實現

現在，我們使用JavaScript來編寫邏輯，控制按鈕的顯示和隱藏。

  var topButton = document.getElementById("topButton");

  window.onscroll = function() {
    scrollFunction();
  };
  
  function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      topButton.style.display = "block";
    } else {
      topButton.style.display = "none";
    }
  }
  
  topButton.onclick = function() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  }

在這個JavaScript代碼中，我們首先獲取id=”topButton”的元素。然後，當窗口滾動時，會觸發onscroll事件，並調用scrollFunction()函數。scrollFunction()函數檢查頁面滾動的距離是否大於20像素，如果距離足夠，就將按鈕顯示出來，否則隱藏它。

當用戶點擊按鈕時，按鈕將幫助用戶快速返回到頁面的頂部。我們使用JavaScript來達成這個功能。當按鈕被點擊時，我們將document.body.scrollTop和document.documentElement.scrollTop設置為零。

四、結論

通過CSS和JavaScript，我們可以創建一個簡單的、美觀的CSS Top Button，提升用戶體驗。希望這篇文章能夠幫助你更好地學習CSS和JavaScript，如有疑問或者建議，歡迎留言。