i am trying to make scroll to top button and i need the button only appears when the y offset = 400, it is working when the page is refreshed or recently opened but it cannot detect the change in the y offset so the button is not dynamic and only works on refresh and detect the position of y offset only on load how can i make the button detect the position of the y offset by scrolling and without refresh.

var goup = document.getElementById("top");

(window.pageYOffset.onchange = function() {
  if (window.pageYOffset >= 400) {
    goup.style.display = "block";
  } else {
    goup.style.display = "none";
  }
})();

#top {
  background-color: red;
  color: white;
  border-radius: 100%;
  padding: 10px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: none;
  display: none;
}

<button id="top">top</button>

i am trying to make scroll to top button and i need the button only appears when the y offset = 400, it is working when the page is refreshed or recently opened but it cannot detect the change in the y offset so the button is not dynamic and only works on refresh and detect the position of y offset only on load how can i make the button detect the position of the y offset by scrolling and without refresh.

var goup = document.getElementById("top");

(window.pageYOffset.onchange = function() {
  if (window.pageYOffset >= 400) {
    goup.style.display = "block";
  } else {
    goup.style.display = "none";
  }
})();

#top {
  background-color: red;
  color: white;
  border-radius: 100%;
  padding: 10px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: none;
  display: none;
}

<button id="top">top</button>

• javascript

• You need to listen to the scroll event and then check [window.pageYOffset](window.pageYOffset) to see if it passed 400px. Ideally instead place the element you want as the threshold (rather than 400px) on the page and use an intersection observer to check when it bees visibile. – Benjamin Gruenbaum Commented Dec 26, 2019 at 13:06

3 Answers 3

window.pageYOffset.onchange will not work. The pageYOffset is a plain number, so there is no onchange or any other event. The reason why it works on refresh is by accident, because the callback function is called once on load (the () at the end of the function). So even if the pageYOffset.onchange worked, it would not work with your code.

You have to listen for the scroll event on the window:

window.addEventListener('scroll', function () {
    // the page was scrolled (horizontally or vertically)
});

var goup = document.getElementById("top");

window.addEventListener('scroll', function() {
  if (window.pageYOffset >= 400) {
    goup.style.display = "block";
  } else {
    goup.style.display = "none";
  }
})

body {
  height: 1000px;
}

#top {
  background-color: red;
  color: white;
  border-radius: 100%;
  padding: 10px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: none;
  display: none;
}

<button id="top">top</button>

You want this:

working demo: https://jsfiddle/vj6Lnzhd/

var goup = document.getElementById("top");
window.addEventListener('scroll', ()=> {
  if (window.pageYOffset >= 400) {
    goup.style.display = "block";
  } else {
    goup.style.display = "none";
  }
});

Same concept, slightly shorter code:

window.addEventListener("scroll", function(){
  document.getElementById("top").style.display = window.pageYOffset >= 400 ? "block" : "none";
});