jQuery ScrollTop() function not working

Question

I'm trying to implement the scrollTop() function with a responsive design, but for some reason this code won't work.

The following checks if the page is completely loaded, than it it checks if the page has been scrolled at all. Than, after making sure that the page has scrolled past the header, it makes an image appear that is fixed at the top of the screen which will send the page to the top of the screen. My problem is that the image won't appear. Any help is appreciated!

$(document).ready(function() {
            if ($(document).width() > 650) {
                $('#welcome').css('padding-top', $('#header').height() + 50 + 'px');
                $(document).scroll(function() {
                    if ($(document).scrollTop() >= $('#header').height()) {
                        $('#up-arrow').css('position', 'fixed').css('right', '0');
                    } else {
                        $('#up-arrow').css('display', 'none');
                    }
                });
            } else {
                $('#welcome').css('padding-top', '25px');
            }
        });
        $(window).resize(function() {
            if ($(document).width() > 650) {
                $('#welcome').css('padding-top', $('#header').height() + 50 + 'px');
                $(document).scroll(function() {
                    if ($(document).scrollTop() >= $('#header').height()) {
                        $('#up-arrow').css('position', 'fixed').css('right', '0').css('display','block');
                    } else {
                        $('#up-arrow').css('display', 'none');
                    }
                });
            } else {
                $('#welcome').css('padding-top', '25px');
            }
        });

random_user_name · Accepted Answer · 2012-11-18 02:58:42Z

3

It took some troubleshooting, but I believe I found the issue:

If the document is not scrolled past the header on load, you set the css for the up-arrow to display:none.

But, when it IS scrolled far enough, you only set the position: fixed - you don't actually turn it back on.

So change this line:

$('#up-arrow').css('position', 'fixed').css('right', '0');

To:

$('#up-arrow').css({'position': 'fixed', 'display': 'block', 'right' : 0});

And it will work.

answered Nov 18, 2012 at 2:58

random_user_name

26.3k7 gold badges81 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery ScrollTop() function not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related