Programmatische navigieren Sie zu einem Anker-Tag

StackOverflow https://stackoverflow.com/questions/265774

  •  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.

War es hilfreich?

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';
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top