Question

我们有一些简单的JQuery，当用户向下滚动到页面的某个页面（及以后）时，它会显示一个回到顶部的链接。

$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
    } else {
        $('.scrollup').fadeOut();
    }
});
$('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

我们如何触发这一点，只显示在桌面版本上，而不是移动版？

我尝试将其包装成：

if($(window).width() >= 480)

例如

，但它仍然显示？

Answer 1

简单的css解决方案是

@media only screen and (max-width: 767px) {
.scrollup{display:none!important;}
}

Answer 2

没有正确的方法使用CSS 来确定某人是否在手机上。这需要javascript和userAgent的检测。

快速解决方案：

if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1 || navigator.userAgent.indexOf('Blackberry') != -1 || navigator.userAgent.indexOf('Android') != -1) {
   $('.scrollup').hide();
}

更有效的解决方案是特征检测：

查看这些文章了解更多信息：

http://jibbering.com/faq/notes/detect-browser/

http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting

返回页首链接仅显示在非移动设备上

2 个答案: