Hide CSS before scroll

Issue

I'm working on developing infinite scroll on my wordpress website, so I have two "Back-to-top" and "Go-to-bottom" buttons. They do their job, but I would like them to remain hidden until the user scrolls a bit. Is there a way to do it through CSS? Everything I tried just failed.

Here's the code I'm using for the buttons:

<div style="position: fixed; bottom: 70px; right: 25px; z-index: 900">
<a href="#top">
    <img class=" lazyloaded" src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" alt="Boton subir" width="40" height="40">
  </a>
</div>
<div style="position: fixed; bottom: 25px; right: 25px; z-index: 900">
  <a href="#fin">
    <img class=" lazyloaded" src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" alt="Boton bajada" width="40" height="40">
</div>

I tried adding margin-top: 100vh, which would be my ideal solution, and some of the code shared by Afif Temani here, but I can't make it work.

Thanks for your time and help!

Solution

Add below CSS and JS and it will hide button initially; and show up when you scroll

//JavaScript
window.onscroll = function() {toggleScrollButton()};

function toggleScrollButton() {
  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
    jQuery(".btn-nav-vertical.top").show();
    jQuery(".btn-nav-vertical.fin").show();
  } else {
    jQuery(".btn-nav-vertical.top").hide();
    jQuery(".btn-nav-vertical.fin").hide();
  }
}

///css -- add in Customizer > CSS
.btn-nav-vertical.top,
.btn-nav-vertical.fin {
    display: none;
}

Answered By - zipal_