Search code examples
javascriptjquerycssscrollwidth

How can i disable jquery function on max-width 768px?

I'm new at Javascript and Jquery. I need help, I`ve read a lot of solutions but I can not fix this.

I just can't get the syntax right. I need this scroll button not to be shown at all, on max-width 768px.

Thank you! 

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 140) {
            $('#scroll-top-button').fadeIn();
        } else {
            $('#scroll-top-button').fadeOut();
        }
    });

    $('#scroll-top-button').click(function (e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: 0 }, 800);
    });
});
Solution

  • Have you tried hiding the button using breakpoints in plain old CSS? 

    @media only screen and (max-width: 768px) {
    #scroll-top-button {
        display: none;
    }
}