Ich habe eine Website unter www.tinytoepress.com, die #hash-anchor-Tag-basierte Navigation mit jQuery und dem jquery-bbq-Plugin verwendet. Es funktioniert großartig, außer dass es manchmal dazu führt, dass die Seite unter die Kopfzeile springt, als würde sie zu einem tatsächlichen <a name...> -Tag gehen. Aber es gibt keine solchen Tags.
Zum Beispiel mit Chrome unter OS X, wenn ich die Homepage besuche:
und klicken Sie dann oben links auf den Link "Store". Ich gehe zu:
Ich bin jedoch unterhalb der Kopfzeile gescrollt, was nicht erwünscht ist. Ich würde gerne ganz oben bleiben.
Wenn ich nach oben scrolle und auf "About" klicke, gehe ich auf die About-Seite, aber ich scrolle noch einmal über die Kopfzeile. Wenn ich jetzt aber nach oben scrolle und erneut auf "Store" klicke, gehe ich zu Store, ohne runterscrollen zu müssen, was gewünscht ist.
Ich verwende die einfachen Methoden .show() und .hide() , um die Sichtbarkeit der div s zu kontrollieren, die über die Navigationsklicks eingestellt werden.
Irgendwelche Ideen, um zu verhindern, auf der Seite herumzuspringen?
Das Standardverhalten des Browsers, wenn die Hash-Adresse geändert wird, besteht darin, zu der ID zu springen, die den Hash darstellt. Zum Beispiel: http://example.com/some-page#store sucht auf der Seite das Element mit der ID store ( <div id="store">...</div> ). Wenn dies gefunden wird, springt die Seite dorthin.
Anstatt das ID-Attribut zu setzen, empfehle ich Ihnen, ein benutzerdefiniertes data-attr -Attribut zu setzen.
<div id="store">...</div> wird <div data-page="store">...</div> und in der jQuery-Seite ersetzen Sie $(location.hash).show() durch:
Der Code sieht wie folgt aus:
%Vor%Leider kann das Problem nicht repliziert werden (OS X 10.9 wird mit Google Chrome 31.0.1650.63 ausgeführt). Eine mögliche Erklärung für dein komisches Springen: Manchmal spielt die sich ändernde Inhaltslänge auch eine Rolle, wenn neue Inhalte geladen und eingefügt werden ...
Ich glaube, es hängt möglicherweise damit zusammen, wie dieser Code den Iframe jedes Mal hinzufügt und entfernt, wenn auf das Nav geklickt wird. Ich habe festgestellt, dass, wenn man dem Iframe erlaubt, den Seitensprung vollständig zu laden, nicht passiert. Wenn ich den Iframe lösche, stoppt das Springen in meinen Chrome-Werkzeugen alle zusammen. Ich mag mich hier irren, aber wenn Sie den Seiteninhalt nur anzeigen und ausblenden, wenn auf das Navigationsfeld geklickt wird, sollte es nicht notwendig sein, den IFrame in einem Jquery-Objekt zu speichern und dann wieder in den gleichen div-Container zu legen. Wenn der Iframe zurückgesetzt wird, werden alle Aufrufe innerhalb des Iframes erneut ausgeführt, um js-Ressourcen zu erhalten. Diese Aufrufe werden unterbrochen, wenn ein Benutzer auf ein anderes Navigationselement klickt. Sehen Sie in der Netzwerk-Registerkarte der Chrome-Werkzeuge nach und Sie werden nach dem Klicken auf alle Navs sehen, dass der Abruf einer Ressource abgebrochen wird und ein anderer einen unvollständigen Inhalt in der Statusspalte hat. Mein Vorschlag ist, das Iframe einmal zu laden und dann den Inhalt bei Bedarf zu verstecken. Ich hoffe, das war hilfreich, viel Glück.
%Vor%Tags und Links jquery navigation jquery-bbq