返回頁首鏈接僅顯示在非移動設備上

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和檢測userAgents。

快速解決方案：

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