JQuery - navigate to a specific location of an element

Question

I have a pagination system like this:

[content] 1 2 3 Next > 

when you click on the 1/2/3 / next button, the [content] element is replaced by ajax.

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

Can I keep the screen focused where the links to the pages are?

Answer 1

You need to find the position of the element and scroll it until the height changes. Something like:

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

Answer 2

In order for the page to be transparently displayed in one place, you need to find out where the links are before loading in the new content.

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

Then, after loading the new content, get a link to the new height.

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

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

 var difference = after - before 

And update the scroll location of the window accordingly

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

Answer 3

Perhaps you can fix this without jQuery or javascript ... Just create a named anchor where you want the top of the page after the user clicks navigation links, put the anchor name in the fragment identifier of the navigation links and not cancel the event so that the page passed to the anchor.

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