2009-09-17 10 views
9

einen Hash zu URL ohne Scroll-Seite hinzufügen? mit Javascripteinen Hash mit Javascript zu URL ohne Scroll-Seite hinzufügen?

  1. i öffnen Seite
  2. i nach unten scrollen
  3. i Link klicken, der einen Hash (vielleicht mit einem Wert #test) (Beispiel: http://www.example.com/#test) fügt
  4. die Seite scrollen muss nicht zurück Zum Seitenanfang.

Wie kann dies getan werden?

hinweis: nur überprüfen, ob es möglich ist, die bewegung zu deaktivieren, auch wenn es ein tag mit id = "test" so weit die rückgabe false; funktioniert gut (um Leute ohne Javascript zu unterstützen), und auch das Vorhandensein der IDs im HTML zu vermeiden, aber es ist kein Problem mit Dingen wie Zahlen, wie 1, 2, 3 (sie sind sowieso nicht als id erlaubt)

alle Antworten sind großartig, nichts Neues oder bahnbrechendes, und keine Lösungen, wie man die Standardfunktionalität bricht, aber es wird tun. :) danke, dass du dir die Zeit genommen hast zu antworten.

+1

"#" hat eine echte semantische Bedeutung, die "der # identifizierte Abschnitt der Ressource in diesem URI" ist. Warum versuchst du diese Standarderwartung zu brechen? – annakata

+0

Geschichte und die Zurück-Taste. Ich persönlich bevorzuge es, den klassischen Standard zu verwenden, aber viele Leute wollen Lust auf Ajax. nach (oder während) schrieb ich diese Frage google und abweichende Kunst implementiert diese "gebrochene" Methode, wie Sie sehen können, wenn Sie nach etwas suchen :) –

+0

im Moment ist die neue beste Art, diese Phantasie ajax Seite laden Sachen zu tun, ist [Geschichte .push] (https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history) –

Antwort

17

Jeder Hash, der nicht auf der Seite vorhanden ist, sollte Ihnen dieses Verhalten geben. Zum Beispiel this link points to a non-existant hash auf dieser Seite. (Der Link wurde mit Chrome 2.0 und IE 6 getestet (die einzigen Browser, die mir zur Zeit zur Verfügung stehen).)

Wenn deine URL also dazu führt, dass du zum Anfang der Seite gehst, vergewissere dich, dass du nichts dabei hast die Seite, deren ID oder Name diese Adresse ist.

+0

nach so viel Zeit zu denken, erkannte ich, dass Sie absolut richtig sind. –

0

Jeder Browser interpretiert den Hash-Wert als "gehe zu dieser DOM ID". Sie könnten versuchen, zwei Dinge ich denken kann:

  1. Machen Sie die Aktion, die den Hash fügt false zurück, wodurch die Notwendigkeit des Browsers deaktivieren es mit der

  2. hinzufügen DOM-Tag zu sehen ID des Hashs, den Sie hinzufügen, genau dort, wo der Klick ist, um den Browser zu stoppen. Aber das ist wahrscheinlich nicht das, was Sie wollen, da Sie den Hash für etwas hinzufügen.

1

Jede der nachfolgenden Beispiele sollen das tun, was Sie wollen:

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<a href="pleaseEnableJS.html" 
    onclick="window.location.hash = '#test1';return false;">Test 1</a> 
<a href="#test2">Test 2</a> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 

Wenn es irgendein Element mit id="test1" oder id="test2" oder <a name="test1"></a> oder <a name="test2"></a> auf Ihrer Seite, wird es zu diesem Element bewegen, sonst Es sollte funktionieren, wie Sie es gewünscht haben.

Wenn Sie Code haben, der nicht wie erwartet funktioniert, geben Sie bitte edit your question ein und fügen Sie ein kleines Beispiel für das HTML und JavaScript ein, das nicht wie erwartet funktioniert.

0

Welbogs Antwort funktioniert gut, aber lässt den #nonexistantanchor Hash in der Adresszeile des Browsers.

Um dies mit jQuery zu tun, können Sie dem Anker eine Klasse hinzufügen und die Methode verwenden, um sowohl die Navigation als auch die Änderung der URL zu deaktivieren.

Natürlich ist das ästhetische Dilemma jetzt vorbei, ob eine elegante URL oder eine Javascript-freie Lösung bevorzugt wird.

Verwandte Themen