jquery - 使用 css display: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;
    }
}

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

使用底部脚本（使用不同的 css）工作正常，但我想将上面的脚本用于淡入淡出使用。

我错过了什么？

 $(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;
    });