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

Refer https://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px/15800696 — Rutuja, Jul 21 '20 at 05:10
This question answers your problem https://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px — Maestro, Jul 21 '20 at 05:13

score 1 · Accepted Answer · answered Jul 21 '20 at 05:09

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

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

1 Answers1