Move buttons up when scrolling to footer

Question

I'm trying to push up two buttons vertically displayed in order to put them above the footer content when I'm scrolling to it.

My two buttons are like this:

And I want them to be like that:

Any ways to make it with Javascript?

Thanks a lot !

Answer 1

Since you provided no code at all, here's my solution based on the assumption your buttons are in a parent div and that div has position: fixed and a right / bottom -property set to a certain amount of pixel.

window.onscroll = function (ev) {
  if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2) {
    document.getElementById("buttons").style.bottom = "100px";
  } else {
    document.getElementById("buttons").style.bottom = "20px";
  }
}

/*

window.onscroll = function (ev) {
  let footerHeight = document.getElementsByTagName("footer")[0].offsetHeight;
  if ((window.innerHeight + window.pageYOffset) >= (document.body.offsetHeight - footerHeight)) {
    document.getElementById("buttons").style.bottom = "100px";
  } else {
    document.getElementById("buttons").style.bottom = "20px";
  }
}

*/

main {
  height: 1000px;
}
#buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

button {
  background-color: grey;
  border-radius: 50%;
  display: block;
  border: none;
  padding: 15px;
  margin-top: 10px;
}

<main></main>
<div id="buttons">

  <button></button>
  <button></button>

</div>

window.onscroll fires of at every scroll-event. It then checks, if the height of the window (window.innerHeight) and the distance scrolled so far (window.pageYOffset) are greater or equal to the total height of the body (document.body.offsetHeight)(- 2) is added because of an annoying mac-'feature'. For more look at this post). If thats the case, it moves the buttons up 100px instead of the 20px normally. If you dont add the else-statement, your buttons will stay at the position even if you scroll up again.

You can now get a bit creative. If you dont want to hit rock bottom of the page to make the buttons move, change the - 2. So you check for the height of your footer, and substract it from the total body height. Your buttons then start to move once the footer is it. Example of that in the javascript snippet, the part that is commented out.