css 我已经做了一个滚动到顶部的按钮，但它不显示在移动的上,我还想显示后，32像素，我该怎么做？

anauzrmj 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(106)

我已经做了一个"滚动到顶部按钮"只使用Html和CSS。它的工作完美。唯一的问题是它也不出现在手机上。我想解决这个问题。我也希望它显示后的某些像素，甚至想让它停留时，页脚显示，否则它隐藏在页脚后面。
网址：

<!---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，但是按钮消失了

css

来源：https://stackoverflow.com/questions/75286782/i-have-made-a-scroll-to-top-button-but-it-doesnt-display-on-mobile-phone-also

1条答案

按热度按时间

vsnjm48y1#

我使用javascript在滚动32px后显示按钮，这样我就添加了一个滚动事件，我可以识别滚动，并且如果滚动超过32px，则添加.show类，否则删除.show类
超文本标记语言

<!-- 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>

中央支助系统

.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'));

赞(0）回复(0）举报 2023-02-01

我来回答

css 我已经做了一个滚动到顶部的按钮，但它不显示在移动的上,我还想显示后，32像素，我该怎么做？

1条答案

相关问题

热门标签

最新问答