Why does html's overflow-x:hidden affect the script of the return to top button?

Question

The vanish at top part of the back to top button script does not work due to html { overflow-x: hidden; }.

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

    <button onclick="topFunction()" class="buton" id="myBtn" title="Back to top"><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; // for Safari
      document.documentElement.scrollTop = 0; // Applies to Chrome, Firefox, IE and 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;
}

Most of it is code, please add more details, most of it is code, please add more details, most of it is code, please add more details, most of it is code, please add more details, most of it It's code, please add more details, it's mostly code, please add more details, it's mostly code, please add more details, it's mostly code, please add more details, it's mostly code, please add more details More details

If I remove the overflow-x in the html, the buttons will disappear at the top, but there will be white space to the right of the entire site content

Answer 1

You should try to override that overflow-x style and select your elements by id. CSS:

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