jQuery - move to a specific element location

Question

Hi

I have a pagination system like this:

[content]
1 2 3 Next >

when you click on 1/2/3/next the [content] element gets replaced trough ajax.

the problem is that the screen focus moves up if the new height of the [content] is larger than the previous one.

can I force the screen to stay focused where where the pagination links are?

Answer 1

You need to find the position of the element and scroll to that position each time the height changes. Something like:

var p = $(".links").position();
$(window).scrollTop(p.top);

Answer 2

To make the page transparently appear to stay in the same place, you'll need to find out where the links are before you load in the new content.

var before = $(".links").offset().top;

Then after the new content is loaded, get the link's new height.

var after = $(".links").offset().top;

Then do the math to find out how much it's moved.

var difference = after - before

And update your window's scroll location accordingly

$(window).scrollTop( $(window).scrollTop() + difference )

Answer 3

You can probably fix this without jQuery or javascript... Just create a named anchor where you want the top of the page to be after the user clicks the navigation links, put the name of the anchor in the fragment identifier of the nav links, and don't cancel the event so the page navigates to the anchor.

<a name="contentTop"></a>

[content]

<a href="#contentTop" onclick="nextPage(); return true;">Next</a>