jquery - 使用 css 显示 :none; 时，滚动到顶部按钮未隐藏

Question

我正在使用以下脚本来实现滚动到顶部的功能，

  $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    }); 

    $('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });

**html**
    <a href="#" class="scrollup">Scroll</a>

**css**
    .scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    left:100px;
    display:none;
    text-indent:-9999px;
    background:url('{{ 'icon_top.png' | asset_url }}') no-repeat;
}

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

问题是当我使用这个脚本时，我的 css 中的 display:none;(在 @media 下)没有被使用。我需要它来隐藏移动设备中的按钮。

底部脚本(具有不同的 css)工作正常，但我想将上面的脚本用于 fadeIn fadeOut 使用。

我错过了什么？

 $(window).scroll(function(){
    if(window.scrollY > 100) {
        $('.scrollup').css('bottom', -8);
    } else {
        $('.scrollup').css('bottom', -100);
    }
});
$('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });

Answer 1

该元素是否具有 #scrolltop 的 ID 以及 .scrollup 的类？对于您正在做的事情，听起来 jQuery 需要两者才能找到它。

如果真正的目标是在移动设备上隐藏它，您可能需要使用媒体查询。

@media (max-width:699px) {
    #scrolltotop, .scrollup { display: none; }
}

这将在任何小于 700 像素的网络浏览器上隐藏该按钮。

* --更新-- *

由于您已经在使用该路线并且它不起作用，您可能只想进行移动浏览器检测来处理此问题。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $('.scrollup').css({display:'none'});
}

您可以在此处找到该测试的完整扩展版本:http://detectmobilebrowsers.com/

通过这种方法，您可以隐藏此元素以及您不想在移动设备上查看页面时显示在页面上的任意数量的元素。