Problema con sito responsive Jquery e Media queryes

[raf.fer]

ho un problema, ho inserito un immagine che fa da back top menu e quando viene cliccata fa tornare la pagina all'inizio, per farlo ho usato il seguente codice jQuery:
$(function() {
$(window).scroll(function()
{

if($(this).scrollTop() != 0)
{
$('#toTop').fadeIn();

}
else
{
$('#toTop').fadeOut();

}
});


$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},1000);
});
});

In sintesi: se lo scroll è a 0 l'immagine scompare altrimenti compare,
il problema nasce quando voglio far scomparire l'immagine quando il sito viene visualizzato da mobile o da schermo piccolo, il css dell'immagine è il seguente:
#toTop {


width: 30px;


height: 38px;


border: none;


background-image: url('img/tom.png');


text-align: center;


padding: 5px;


position: fixed;


bottom: 10px;


right: 10px;


cursor: pointer;


color: #333333;


font-family: verdana;


font-size: 11px;


}
#toTop:hover
{


background-image: url('img/ar.png');
}
Come devo fare per far scomparire l'immagine una volta rimpicciolito lo schermo??????

[picouli]

Hai provato con

@media (max-width: 480px) {  
  #toTop {
    display: none;
  }
}

per il CSS

e

if($(this).scrollTop() != 0 && $(window).width() > 480)
{
  $('#toTop').fadeIn();
} 

per il JavaScript?