Please I need your support as I write this code to create a button and when I press it I move to the top of page ...the button is created good and move to top of page ... But I want the button hide when the scrolling in the top of page and appear again when I scroll down ...the scroll function not work I do not know the reason … I support you with the code in JavaScript and CSS related to my question …you are genius if you can fix it.

First JavaScript code

//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";
  }
}

CSS code

#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);
}

Note : when I change in CSS code and make display: none; the button hidden and when I change it to display: block; it appear again …this is not problem ...the real problem that the (to top button) not appear and hidden according to the scrolling ... I think the scroll function not work. Thanks for your support in advance.