モバイルで 'スクロールアップ'スクリプトを削除します。

Question

私の<ヘッドには次のコードがあります。ウィンドウが150pxから下になるとボタンをフェードインします。

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

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; 
} 

私がアップBTN＃あなたはあなたのJavaScriptを包むことができ、モバイルデバイス

Answer 1

に '/ゴーン消えた' ままにしたいHTML

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

このようなコード

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

これで、スクリプトを動作させたい場合は、 '768'を最も低いデバイスに変更できます。上のコードは、基本的にipad形式になるまでスクリプトの実行を停止します。

Answer 2

JavascriptでmatchMediaをCSSメディアクエリに相当するものとして使用できます。これにより、画面がモバイルサイズかどうかを確認できます。 （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 */ 
}