Question

我为我正在建设的网站创建了一个“返回顶部”按钮。该按钮通常在较大的分辨率上淡入淡出，但我无法在移动设备上消失。我最终使用jQuery remove（）方法用于较小的屏幕。有一个更好的方法吗？这是我的代码

<i class="fa fa-arrow-circle-o-up fa-3x scrollToTop"></i>


.scrollToTop{
    width:70px; 
    height:70px;    
    text-align:center; 
    position:fixed;
    bottom:50px;
    right:10px;
    color: #09C;
    display:none;
    opacity: .5;

}
.scrollToTop:active, .scrollToTop:hover  {
    color: #09C;
    text-decoration:none;
    cursor:pointer;
}


   $(document).ready(function(){
    var $scrollButton = $(".scrollToTop");
    var $screenWidth = $(window).width();
    if ($screenWidth<480) {
        $scrollButton.remove();
    } else {
        $('body').append($scrollButton);
    };
    $(window).scroll(function(){            
        if($(this).scrollTop()>500)
        {
            $scrollButton.fadeIn("slow");
        } else {
            $scrollButton.fadeOut("slow");
        };
    });
    $scrollButton.click(function(){
        $("html, body").animate({scrollTop: 0}, 800);
        return false;
    });

});

Answer 1

您可以使用媒体标记在css中执行此操作。只需在小屏幕上隐藏按钮即可。我认为大约320px宽可以用于移动设备。显示：小屏幕上没有w3c在媒体标签上有黄金文档

Answer 2

您可以通过添加一些CSS样式来实现：

@media only screen and ( max-width: 767px ) {
    .scrollToTop{
        display:none !important;
    }
}

隐藏滚动到顶部移动按钮

2 个答案: