jQuery scrollLeft not working

Question

I just launched http://elliewauters.com & have a little problem that I'd like to fix, the site uses a lot of animated horizontal scrolling to go from one 'page' to the next, but on refresh most browsers remember the scroll position & go back to where I was before, I do not want this. Try going to the 'About' page & then refreshing. You'll see that the logo & menu are in the middle of the page as they where when you arrived at the site for the first time.

I would like help with either of two things:

1. To reset the scroll position back to 0,0 on page refresh OR
2. To move the logo & menu to the top if the scrollLeft value is greater than 1.

I have tried using $(window).scrollLeft(0); to no avail &

scrollLeft = $(window).scrollLeft();
console.log(scrollLeft)
if (scrollLeft>1) {
    $('#header').addClass('notLeft').css('top','0%');
} else {
    $('#header').addClass('left').css('top','25%');
}

does not work, does anyone please have an idea of how I could achieve what I want?

Thanks in advance

Answer 1

I know this is an old thread, but .scrollLeft() in jQuery didn't work for me on Android, too, under jQuery 1.9.1 today (April, 2013). Try this:

window.scrollTo(x, y);

This worked for me on all recent platforms and OS's, including Android phones.

Answer 2

Well Firefox wasn't working because of the console.log(scrollLeft) so it should work after removing that. As for the problem you are having, I'm guessing it is only happening in IE? The solution is to not use $(window) but instead replace it with $(document). So use:

scrollLeft = $(document).scrollLeft();

Answer 3

$("#el").animate({ scrollLeft:110 }, "fast");