0

一番上へのスクロール機能に次のスクリプトを使用しています。

  $(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 が異なる) は正常に動作していますが、上のスクリプトを 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;
    });
4

3 に答える 3

0

代わりに jQuery .hide() を試してください/

$('.scrollup').hide();

他の回答で説明されている以外に、モバイルを確認するいくつかの方法

1)

 if( useragent.search("iphone") )
    ; // iphone
else if( useragent.search("ipod") )
    ; // ipod
else if( useragent.search("android") )
    ; // android

2)

var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
    || screen.width <= 480;
于 2013-03-18T19:40:15.450 に答える