為什麼html的overflow-x:hidden會影響回傳頂部按鈕的腳本？

Question

由於 html { overflow-x: hidden; }，返回頂部按鈕腳本中的 vanish at top 部分無法運作。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 包含jQuery -->

    <button onclick="topFunction()" class="buton" id="myBtn" title="回到頂部"><i class="fa-solid fa-angle-up"></i> ;

        <script>
    let mybutton = document.getElementById("myBtn");
    
    window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
      } else {
        mybutton.style.display = "none";
      }
    }
    
    function topFunction() {
      document.body.scrollTop = 0; // 適用於 Safari
      document.documentElement.scrollTop = 0; // 適用於 Chrome, Firefox, IE 和 Opera
    }
            </script>
            </button>

CSS


    html,
    body {
    height: 100%;
    scroll-behavior: smooth;
    position: relative;
    overflow-x: hidden;
  }

body {
    background-color:#060606;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

.buton {
  overflow-x: visible !important;
}
  
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
}

#myBtn:hover {
  background-color: #333;
}

大部分是程式碼，請添加更多細節，大部分是程式碼，請添加更多細節，大部分是程式碼，請添加更多細節，大部分是程式碼，請添加更多細節，大部分是程式碼，請添加更多細節，大部分是程式碼，請添加更多細節，大部分是程式碼，請添加更多細節，大部分是程式碼，請添加更多細節，大部分是程式碼，請添加更多細節

如果我在html中去除overflow-x，按鈕將會在頂部消失，但整個網站內容的右側將會有空白

Answer 1

你應該嘗試覆寫那個 overflow-x 樣式，並透過 id 選擇你的元素。 CSS：

#myBtn {
  overflow-x: visible !important;
}