当我添加类更改器时，滚动按钮消失了

Question

当我添加类更改器后，scroll按钮消失了

    //loading page
        window.addEventListener('load', function () {
          const loader = document.querySelector('.wavy');
          loader.className += ' hidden'; // class "loader hidden"
        });

        //up button
        //Get the button:
        mybutton = document.getElementById('up');

        // When the user scrolls down 300px from the top of the document, show the button
        window.onscroll = function () {
          scrollFunction();
        };

        function scrollFunction() {
          if (
            document.body.scrollTop > 300 ||
            document.documentElement.scrollTop > 300
          ) {
            mybutton.style.display = 'block';
          } else {
            mybutton.style.display = 'none';
          }
        }

        // When the user clicks on the button, scroll to the top of the document
        const btnScrollToTop = document.querySelector('#up');
        btnScrollToTop.addEventListener('click', function () {
          //scroll window.scrollTo(0, 0);  // non animated
          $('html,body').animate({ scrollTop: 0 }, 'slow'); //animated to smooth scroll
        });

        //transparent navbar
        head = document.getElementById('head');

        window.scroll = function () {
          scrollFunction();
        };

        function scrollFunction() {
          if (
            document.body.scrollTop > 500 ||
            document.documentElement.scrollTop > 500
          ) {
            $('#head').removeClass('head').addClass('trans-head');
          } else {
            $('#head').removeClass('trans-head').addClass('head');
          }
        }