Question

I have a jQuery script for a “Back to Top” button as listed below:

<script type="text/javascript">
$(document).ready(function(){

// hide #back-top first
$("#TopButton").hide();

// fade in #back-top
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#TopButton').fadeIn();
        } else {
            $('#TopButton').fadeOut();
        }
    });

    // scroll body to 0px on click
    $('#TopButton, #logo').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});

});
</script>

I have two stylesheets one for desktop and one for mobile. I am trying to hide the back to top button when the mobile stylesheet is used as so:

#TopButton {
display: none;
}

but it still appears. Is there anyway around this without having mess with the HTML?

Thanks in advance.

Answer 1

Your current method is having trouble because your javascript code .fadeIn() will override your display: none;

You need to set a CSS value that won’t be affected by the jquery code. I’m assuming your #TopButton is absolutely positioned? If it is, try setting a property such as

left: -9999px;

That will keep it off the page, and it won’t be affected at all when jQuery tries to fade it in.

Hopefully that helps you out