how to show a div after 500px using pure JavaScript?

Question

i have a <button> calls a function that scroll to the top of the page, how to appear this button automatically after 800px. using pure JavaScript Only?

<button class="button">
  GO To UP
</button>   

var button = document.querySelector(".button");

button.onclick = function () {
  window.scrollTo(0, 0);
};

Answer 1

One approach could be having a hidden class on the button, and in css we can give the visibility of this class to be hidden.

.hidden {
  visibilty: hidden;
}

For handling the scroll functionality we can use this function

var button = document.querySelector(".button");

button.onclick = function(){
    window.scrollTo(0, 0);
}

window.addEventListener("scroll", () => {
    var y = window.scrollY;
    if (y >= 500) {
        button.classList.remove("hidden");
    } else {
        button.classList.add("hidden");
    }
});