Scroll to top button is not hidden when using css display:none;

[Hansika]

I'm using the following script for scroll to top function,\[code\] $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; });**html** <a href="http://stackoverflow.com/questions/15460702/#" class="scrollup">Scroll</a>**css** .scrollup{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; left:100px; display:none; text-indent:-9999px; background:url('{{ 'icon_top.png' | asset_url }}') no-repeat;}@media only screen and (max-width: 767px) { .scrollup { display:none; }}\[/code\]The problem is that when i'm using this script the \[code\]display:none;\[/code\] in my css (under \[code\]@media\[/code\]) is not in use. i need it to hide the button in mobile devices.The bottom script (with different css) is working fine, but i want to use the above for the fadeIn fadeOut use.What i'm missing?\[code\] $(window).scroll(function(){ if(window.scrollY > 100) { $('.scrollup').css('bottom', -8); } else { $('.scrollup').css('bottom', -100); }});$('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; });\[/code\]