2010-07-06 16 views
7

habe ich eine Paginierung System wie folgt aus:jQuery - Umzug in ein bestimmtes Element Lage

[content] 
1 2 3 Next > 

, wenn Sie auf 1/2/3/neben der [content] Element wird Trog ajax ersetzt.

Das Problem ist, dass der Bildschirmfokus nach oben bewegt wird, wenn die neue Höhe des [Inhalts] größer als die vorherige ist.

kann ich den Bildschirm zwingen, wo genau die Paginierungslinks zu bleiben?

Antwort

10

Sie müssen die Position des Elements suchen und bei jeder Änderung der Höhe zu dieser Position blättern. Etwas wie:

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

Sie sollten "offset" anstatt "position" verwenden. Positionsmessungen vom übergeordneten Element, während die Maße aus dem Dokument ausgeglichen werden. –

+0

funktioniert, danke: D – Alex

0

Um die Seite transparent an der gleichen Stelle zu bleiben scheint, werden Sie feststellen müssen, wo die Verbindungen sind, bevor Sie in dem neuen Inhalt laden.

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

Dann, nachdem der neue Inhalt geladen ist, erhalten Sie die neue Höhe des Links.

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

Dann tun Sie die Mathematik, um herauszufinden, wie viel es bewegt wird.

var difference = after - before 

und aktualisieren Scroll Lage Ihr Fensters entsprechend

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

Sie wahrscheinlich dies ohne jQuery oder JavaScript beheben können ... Erstellen Sie einfach einen benannten Anker in dem Sie die oben auf der Seite angezeigt werden sollen, nachdem die sein Der Benutzer klickt auf die Navigationslinks, fügt den Namen des Ankers in die Fragment-ID der Nav-Links ein und bricht das Ereignis nicht ab, sodass die Seite zum Anker navigiert.

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

[content] 

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