Necesito su apoyo mientras escribo este código para crear un botón y cuando lo presiono me muevo a la parte superior de la página... el botón se crea bien y se mueve a la parte superior de la página... Pero quiero que el botón se oculte cuando el desplazamiento en la parte superior de la página y aparece de nuevo cuando me desplazo hacia abajo ... la función de desplazamiento no funciona, no sé la razón ... Te apoyo con el código en JavaScript y CSS relacionado con mi pregunta ... eres un genio si puedes arreglalo.

Primer código JavaScript

 //here i create a function to make scroll smooth...i can write it in css file but i want to show what is i lrarned: const scrollSmoothly = function () { const myHTML = document.querySelector("html"); myHTML.style.scrollBehavior = "smooth"; }; //create the to Top Button // scrollSmoothly(); function toTopButton_create() { const toTopButton = document.createElement("botton"); const textnodeTOP = document.createTextNode("TO_Top"); toTopButton.appendChild(textnodeTOP); //document.querySelector("footer").appendChild(toTopButton); const rr = document.querySelector("footer"); rr.insertAdjacentElement("beforebegin", toTopButton); toTopButton.setAttribute("id", "ourBtn"); toTopButton.addEventListener("click", test2); } toTopButton_create(); //below function to go to the top of sheet function test2() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } // below function to hide the (to top button) in the top and appear again when we scroll down window.onscroll = function () { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { toTopButton.style.display = "block"; } else { toTopButton.style.display = "none"; } }

codigo css

 #ourBtn { padding: 16px; right: 31px; bottom: 10px; font-size: 19px; z-index: 98; border-radius: 5px; border: none; outline: none; display: block; background-color: rgb(17, 199, 231); color: rgb(29, 2, 2); position: fixed; cursor: pointer; } #ourBtn:hover { background-color: rgb(219, 8, 8); }

Nota: cuando cambio el código CSS y hago display: none; el botón oculto y cuando lo cambio para display: block; aparece de nuevo... esto no es un problema... el verdadero problema es que (el botón superior) no aparece y se oculta de acuerdo con el desplazamiento... Creo que la función de desplazamiento no funciona. Gracias por su apoyo de antemano.