Warum machen die Seite Anker manchmal verpassen?

Auf einer HTML-Seite, einem link wie diesem:

<a href="#pagelocation">Location on Page</a>

...sollten navigieren Sie zu diesem Punkt auf der Seite:

<a name="pagelocation">

Aber in meiner Erfahrung, ist es manchmal verfehlt - vor allem, wenn die Verlinkung von einer anderen Seite (wie <a href="somepage.html#pagelocation">). Von "findet," ich meine, es blättert an der falschen Stelle auf der Seite - vielleicht, vielleicht auch nicht.

Normalerweise ist die Ziel-Position landet am oberen Rand des Bildschirms. Ich weiß, dies kann fehlschlagen, wenn es nicht genug Platz unter dem Anker Blättern Sie oben auf dem Bildschirm.

Warum sonst würde es scheitern? Kommt es auf layout überhaupt? Wie kann ich es beheben?

(Ich halte das allgemein, weil ich würde gerne eine catch-all-Verweis-Antwort.)

Update 1

Dank für die Zeiger so weit über die nicht-expliziten Bild-Größen. Aber was ist auf eine Seite wo alle Elemente die explizite Größe? (Ich bin den Umgang mit jetzt.)

InformationsquelleAutor Nathan Long | 2009-01-06
  1. 18

    Recht oft scrollen auftreten können, bevor die Seite fertig geladen ist. Wenn Sie Bilder ohne Höhen und breiten, wird die Seite springen, dann laden Sie das Bild und re-layout selbst, dass die Stelle, die Sie zuvor sprang, scheinen falsch.

    Edit: Alles andere, können "Seitenlayout ändern" sollte auch betrachtet werden mit Misstrauen... das einbinden der javascript-und CSS nicht geladen <head> (never mind, dass alle CSS - sollte geladen werden, in den Kopf; es ist nicht immer).

    Wenn die Seite prallte durch eine Umleitung, ich glaube, DH wird ein Bildlauf zum Ende der Seite, aber Firefox nicht.

    • Ich denke, es könnte auch Probleme geben, wenn das Ziel in einem gefloateten container oder den container positioniert ist, mit einer anderen Methode als 'static', da diese distrupts den natürlichen Fluss des Dokuments...
    • Ich habe auch dieses problem für meine "Inhaltsverzeichnis" verankert. Vor allem, wenn Sie die Zurück-Taste gedrückt wird und dann nach Vorne, wie die Seite geladen wird, klicken Sie auf eine beliebige Anker-link tut nichts, bis die Seite vollständig geladen. Ich habe mehrere Skripte, die gestundet sind und einige von Ihnen haben, erstellen Sie einige Elemente innerhalb der Seite.
    InformationsquelleAutor Greg
  2. 7

    JS-Lösung

    Führen Sie diese Funktion auf Dokument bereit. 

     function goToAnchor() { 
    hash = document.location.hash;
    if (hash !="") {
        setTimeout(function() {
            if (location.hash) {
                window.scrollTo(0, 0);
                window.location.href = hash;
            }
        }, 1);
    }
    else {
        return false;
    }
}
    • ersparte mir eine Menge Zeit, einfaches Konzept ..haben muss! wo viele Bilder gerendert werden müssen..
    InformationsquelleAutor Edd Smith
  3. 5

    Ich glaube, dass das Verhalten, das Sie sehen, ist das Resultat der browser-Ortung, um die Stelle auf der Seite, bevor alle Bilder fertig geladen wurden. Sobald die Bilder fertig laden, dann das layout der Seite geändert (die Seite ist wahrscheinlich mehr vertikal, zum Beispiel), wodurch die Stelle, an der der Anker sollte sein geändert zu haben - aber der browser immer noch denkt, es hat bereits erreicht, dass der Anker.

    InformationsquelleAutor matt b
  4. 2

    Wie oben erwähnt, ist dies wahrscheinlich aufgrund der Bilder gerendert, spät-und 'anpassen' das layout, wie Sie geladen werden.

    Wenn Sie können die Größe der Bilder dann, dass viel Raum zugewiesen werden können, bevor Sie machen, das sollte das problem vermeiden.

    Als eine Randnotiz, ich hatte dieses problem vor in form des mit Hilfe der vorwärts - /zurück zwischen genug Seiten, die die Bilder benötigt nachladen, was mich am Ende an der falschen Stelle, nachdem Sie gemacht habe.

    InformationsquelleAutor DrHazzard
  5. 2

    Habe ich auch gesehen, das passiert, wenn der JavaScript-erstellt eine drop-down-Menü am oberen Rand einer Seite. Dann, sobald das Menü fertig ist, ist es versteckt, scrollen bis der Inhalt unten.

    In der Zwischenzeit der browser hat sich schon das Ziel setzt, die Lage am oberen Rand des Fensters. Versteckt sich das Menü ganz oben auf der Seite bewegt sich der Ziel-Lage am oberen Rand des Fensters.

    InformationsquelleAutor JSchaefer
  6. 1

    Beachten Sie, dass Sie hinzufügen können id="pagelocation" zu fast jedem HTML-element, für das gleiche Ergebnis, das spart Ihnen das hinzufügen der zusätzlichen Anker für die link-Ziele.

    • Wie würden Sie die Struktur der Verbindung?
    • Die gleichen - <a href="#pagelocation">Position auf der Seite</a>
    InformationsquelleAutor Peter Hilton
  7. 1

    OK. Ich denke, das ist neu. Mit HTML5 ist autofocus verursacht eine Fehlzündung, so wird die jQuery - focus() Methode. Dauerte 90 Minuten von Versuch und Irrtum zu entdecken, weil ich dachte, das Problem war Bild bezogen 🙂

    InformationsquelleAutor Nick
Schreibe einen Kommentar