CODEWITHSUNDEEP
jqueryjquery-mobiletransition
Matt Rothmeyer
Matt Rothmeyer

Reputation: 11

jQuery Mobile: Page scrolls down after transition

I'm navigating from Page 1 to Page 2 in my jQuery Mobile site using the $.mobile.changePage() method. Both Page 1 and Page 2 are larger than the screen, though Page 1 is much longer than Page 2

Page 1 is a long list of items. When the user taps an item, I load the content for page 2 via ajax, append that content to the body, and then transition to page 2 using changePage().

If the user scrolls down the list on page 1, and then transitions to page 2, the window scrolls down a variable amount on page 2. I would add that the distance scrolled on page 2 seems to be related to the distance the user previously scrolled on page 1.

I have tried using $.mobile.silentScroll(0); and $('body').scrollTop('0'); but I haven't had any success.

How can I go about preventing the change page method from scrolling down on page 2

Upvotes: 1

Views: 90

Answers (1)

Elliot B.
Elliot B.

Reputation: 17651

I've encountered this same issue before. What you can do is create an event handler that is invoked whenever there is a page change and have that function scroll to the top of the page:

$.mobile.pageContainer.on("pagecontainerchange", function(event, ui) {
    $(document).scrollTop(0);
});

The key difference here is performing the .scrollTop() on the document instead of the body.

In my code I've made this small example a bit more sophisticated. I record the vertical scroll position of each page, store it on the page DOM element, and restore the vertical scroll position when the user returns to the page. That way the user is always returned to where they left off instead of always being scrolled to the top of the page.

Upvotes: 1

Related Questions