I have made a scroll to top button but it doesn't display on mobile phone. Also I want to to show after 32 px how can I do that?

Question

I have made a "scroll to top button" only using Html and CSS. It works perfectly. The only problem is it also doesn't appear on mobile phone. I want to fix that. I also want it to display after certain pixels and even want to make it stay when the footer is displayed otherwise it hides behind the footer.

Html:

<!---Scroll to the top button-->
<section class="scroll">

</section>

<a class="gotopbtn" href="#"> <i class="fas fa-arrow-up"></i> </a>

<!--End of scroll to the top button-->

CSS:

.gotopbtn{
    .gotopbtn{
    position: fixed;
    width: 50px;
    height: 50px;
    background: var(--lightersg);
    bottom: 16px;
    right: 2px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 22px;
    
  }

  @media only screen and (max-width: 600px) {
    #scroll {
      display: none;
    }
  }
    

How to display this button on mobile phone? I tried using @media but it doesn't work. I also tried display:flex but the button vanishes

Answer 1

I use javascript for showing button after scroll 32px in such a way that I add a scroll event that I recognize the scroll and with a condition I recognize if scroll go over that 32px add.show class and otherwise remove.show class

HTML

<!-- height: 200vh; is just for create scroll in page -->
<section class="scroll" style="height: 200vh;"></section>
<a class="gotopbtn" href="#"> <i class="fas fa-arrow-up"></i></a>

CSS

.gotopbtn {
    position: fixed;
    width: 50px;
    height: 50px;
    background: var(--lightersg);
    bottom: -66px;
    right: 2px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 22px;
    transition: all 0.3s;
}

.gotopbtn.show {
    bottom: 16px;
}

JS

let gotopbtn = document.querySelector('.gotopbtn');
window.addEventListener("scroll", (event) => window.pageYOffset >= 32 ? gotopbtn.classList.add('show') : gotopbtn.classList.remove('show'));