javascript - jQuery scrollLeft not working - Stack Overflow

admin管理员组

文章数量:1343901

I just launched & 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

I just launched http://elliewauters. & 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

• javascript
• jquery
• scroll

Share Improve this question Follow asked Oct 13, 2010 at 23:22 ZanderZander 2,68444 gold badges3333 silver badges5656 bronze badges 2

• Just an idea: I am not sure if it will work but you can try to catch this 'refresh' in onleave and reset it at that point? – Vinzenz Commented Oct 13, 2010 at 23:38
• The header doesn't move at all in Firefox. – Mottie Commented Oct 14, 2010 at 3:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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();

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.

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

本文标签： javascriptjQuery scrollLeft not workingStack Overflow