Hi there. I want to slide in (jquery) a link in the bottom right when the page loads that offers the user to be pushed back to the top of the page.

So far all is well. I have it appearing at width 1024 or bigger. With a media query set in order for it not to appear for smaller devices:

#totop {
position: fixed;
bottom: 0;
right: 10px;
background: #FFF;
color: #000;
padding: 10px;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
display:block;
-moz-box-shadow: 10px 10px 5px #000;
-webkit-box-shadow: 10px 10px 5px #000;
box-shadow: 10px 10px 5px #000;

}



@media screen and (max-width: 1023px) {

#totop {
display: none; /* Remove to top button */
}


Now I understand I want an if statement checking whether the css is to display block or none. Or if this doesn't work have an if statement checking the screen width itself rather than media queries.

So far I have this:

$(document).ready(function() {
if( $('#totop').is(':visible') ) {
("#totop").slideDown("slow");
} else {
("#totop").hide();
}
});

Please help!