Entfernen Scroll-up-Skript auf Handy

Question

Ich habe folgenden Code in meinem < Kopf> Tags, die eine Schaltfläche in verbläßt, wenn das Fenster 150px von unten ist.

<script> 
    $(window).scroll(function() { 
if ($(window).scrollTop() + $(window).height() > ($(document).height() - 150)) { 
    $("#up-btn").fadeIn(500); 
} else { 
    $("#up-btn").fadeOut(500); 
} 
}); 
</script> 

die css

#up-btn { 
position: fixed; 
display: none; 
font-size: 1em; 
font-weight: 700; 
letter-spacing: 2px; 
text-transform: uppercase; 
bottom: -4px; right: 3%; 
color: #fff; 
border-radius: 2px; 
background-color: #1aa97f; 
padding: 18px 20px; margin: 25px auto 0 auto; 
} 

html

<footer> 
    <a id="up-btn" href="javascript:void(0);" onclick="scrolltop();">TOP <i class="fa fa-chevron-up"></i></a> 
</footer> 

Ich mag die #-btn up 'verschwunden/gone' auf mobile Geräte zu bleiben

Answer 1

Sie Ihren Javascript wickeln könnte Code wie dieser

if ($(window).width() > 768) { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() + $(window).height() > ($(document).height() - 150)) { 
    $("#up-btn").fadeIn(500); 
     } else { 
    $("#up-btn").fadeOut(500); 
     } 
    }); 
}; 

Jetzt können Sie "768" auf das niedrigste Gerät ändern, mit dem Ihr Skript funktionieren soll. Der obige Code stoppt das Ausführen des Skripts, bis es ein iPad-Format erreicht hat.

Answer 2

Sie können matchMedia in Javascript als das Äquivalent von CSS-Medienabfragen verwenden, mit denen Sie sehen können, ob der Bildschirm eine mobile Größe hat.

Beispiel (von MDN):

if (window.matchMedia("(min-width: 400px)").matches) { 
    /* the viewport is at least 400 pixels wide */ 
} else { 
    /* the viewport is less than 400 pixels wide */ 
}