Question

一直在努力解决这个问题，无法让它发挥作用。我只希望这个脚本适用于桌面。感谢。

<script type="text/javascript">
    $(document).ready(function() {
        $('#scroll_top').hide();
    });
    $(window).scroll(function() {
        if ($(this).scrollTop() == 0) {}
        if ($(this).scrollTop() >= 1000) { // If page is scrolled more than 50px
            $('#scroll_top').fadeIn(300); // Fade in the arrow
        } else {
            $('#scroll_top').fadeOut(300); // Else fade out the arrow
        }
    });
    $('#scroll_top').click(function() { // When arrow is clicked
        $('body,html').animate({
            scrollTop: 0 // Scroll to top of body
        }, 500);
    });
</script>

Answer 1

桌面是什么意思？喜欢电脑吗？

如果是，请在下面添加if条件：

if( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
 // Your code
}

条件低于所有智能手机或平板电脑浏览器。

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

“！”在条件让它发现所有其他条件之前：所以计算机那些。

如果窗口宽度低于1024px，您也可以尝试窗口宽度，可以假设该设备是平板电脑或智能手机。

if (window.innerWidth <= 1024){
    //your code
}

如果需要，请随时询问。

Answer 2

我会测试窗口大小，而不是设备类型。测试窗口大小比测试设备更准确，此外，如果有人确实拥有15000大屏幕（是的，我有意夸大:) :)窗口打开并调整到非常小，你想要这个脚本吗？跑步？可能不是。

但是。。。

我将此脚本识别为＆＃34;滚动到顶部＆＃34;按钮脚本，也许你想让它在较小的设备上工作，只是使用较小的图像？我个人发现它们非常有用，只要它们的尺寸小到不能阻止内容。。只是我的2美分。我确定你比我更了解你的网站。

祝你好运！

Answer 3

如果您想依赖css媒体查询，可以向HTLM添加3个不可见元素，然后测试显示是否设置为阻止。

将这些元素添加到页脚

#isMobile,#isTablet{ 
     Display:none;
}
@media (max-width: 500px){
    #isMobile{
     Display: block;
    }
 }
@media (min-width: 501px) and (max-width: 1024px){
    #isTablet{
     Display: block;
    }
 }

的js

If( $("#isTablet").css("display") == "block") {
// do code
}

我不保证我的代码可以正常工作，但您应该了解如何在js中使用css媒体查询的基本知识。这样，如果您更改断点大小，则无需更新javascript。

另一方面，您可以随时使用

进行简单的窗口宽度测试

if( $(window).width() > 1024 ){
    //do code
}

如何根据媒体查询禁用特定脚本？

3 个答案: