我做了一个滚动到顶部的按钮，但它没有显示在手机上。 另外我想在 32 px 之后显示我该怎么做？

Question

我只使用 Html 和 CSS 制作了一个“滚动到顶部按钮”。它工作得很好。 唯一的问题是它也没有出现在手机上。 我想解决这个问题。 我还希望它在某些像素之后显示，甚至想让它在显示页脚时保持不变，否则它会隐藏在页脚后面。

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

如何在手机上显示这个按钮？ 我尝试使用@media 但它不起作用。 我也试过 display:flex 但按钮消失了

Answer 1

我使用 javascript 在滚动 32px 后显示按钮，这样我添加了一个滚动事件，我可以识别滚动，并且如果滚动 go 超过 32px add.show class 则 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'));