Programmatische navigieren Sie zu einem Anker-Tag
-
06-07-2019 - |
Frage
Betrachten Sie den folgenden Code ein:
<a href="#label2">GoTo Label2</a>
... [content here] ...
<a name="label0"></a>More content
<a name="label1"></a>More content
<a name="label2"></a>More content
<a name="label3"></a>More content
<a name="label4"></a>More content
Gibt es eine Möglichkeit über den „GoTo Label2“ Link zu emulieren, klicken auf den entsprechenden Bereich auf der Seite durch den Code zu blättern?
Bearbeiten : Eine akzeptable Alternative wäre, mit einer eindeutigen ID zu einem Elemente zu bewegen, die bereits auf meiner Seite vorhanden ist. Ich würde das Hinzufügen der Anker-Tags, wenn dies eine praktikable Lösung ist.
Lösung
Diese JS hat sich für mich im Allgemeinen gut funktioniert, wenn Sie auch eine ID auf das Element gesetzt:
document.getElementById('MyID').scrollIntoView(true);
Das ist gut, wie es auch scrollbaren divs etc, so dass der Inhalt sichtbar positionieren wird.
Andere Tipps
Mit javascript:
window.location.href = '#label2';
Wenn Sie es von dem Server / Code-behind tun, dann können Sie ihn nur Javascript emittieren und registrieren Sie es als Startskript für diese Seite.
Der Umzug in einen Anker von Server-Seite Beispiel ist c #.
ClientScript.RegisterStartupScript(this.GetType(), "hash", "location.hash = '#form';", true);
Ich nehme an, dies funktioniert:
window.location="<yourCurrentUri>#label2";
Die Lösung
document.getElementById('MyID').scrollIntoView(true);
funktioniert gut in fast allen Browsern, während ich bemerkt habe, dass in einigen Browsern oder in einem Handy (wie einige Blackberry-Versionen) „ScrollIntoView“ -Funktion nicht erkannt wird, so würde ich diese Lösung (ein bisschen hässlicher als das betrachten vorherige):
window.location.href = window.location.protocol + "//" + window.location.host +
window.location.pathname + window.location.search +
"#MyAnchor";
Wenn das Element ein Anker-Tag ist, sollten Sie in der Lage zu tun:
document.getElementsByName('label2')[0].focus();
kein "#", wenn Sie verwenden window.location.hash
Sie können einfach die neue URL öffnen mit dem Namen angehängt, zum Beispiel http://www.example.com/mypage.htm#label2
In JavaScript
location.href = location.href + '#label2';