Wie kann ich nach dem Scrollen in Chrome zu einem benannten Anker zurückkehren?

Wie kann ich nach dem Scrollen in Chrome zu einem benannten Anker zurückkehren?

Wenn ich eine URL mit einem benannten Anker lade (wieDieses hier), bringt mich Chrome direkt zu dem Teil der Seite, der den Anker enthält. So weit, so gut.

Wenn ich jedoch ein wenig herumscrolle, verliere ich möglicherweise den Überblick darüber, wo der Anker war. Wie kann ich zum benannten Anker zurückkehren?

Ich habe versucht, die Seite zu aktualisieren, aber Chrome bringt mich nicht zurück zum Anker. Ich habe versucht, die Seite zwangsweise zu aktualisieren (Strg-F5), aber ohne Erfolg. Ich habe auch versucht, die Seite mit Strg-L (um die Adressleiste auszuwählen) und anschließend mit der Eingabetaste neu zu laden.

Meine Problemumgehung besteht darin, die Registerkarte zu schließen und dann eine neue mit der vollständigen URL zu öffnen. Das ist ziemlich ärgerlich für jemanden, der viele Spezifikationsdokumente liest! Gibt es einen besseren Weg?

Antwort1

Sie können einfach etwas JavaScript ausführen, um das Element an den Anfang der Ansicht zu scrollen:

document.getElementById(location.hash.slice(1)).scrollIntoView()

Quelle:Javascript - Wie scrollt man eine HTML-Seite zu einem bestimmten Anker? - Stack Overflow

Der Einfachheit halber können Sie dies als Lesezeichen in der Lesezeichenleiste hinzufügen oderDefinieren Sie eine Tastenkombination dafür.

javascript:document.getElementById(location.hash.slice(1)).scrollIntoView()

Wenn die URL keinen Hash enthält, wird ein (stiller) JavaScript-Fehler verursacht. Um zum Anfang der Seite zu scrollen, verwenden Sie stattdessen

(document.getElementById(location.hash.slice(1))||document.body).scrollIntoView()

Antwort2

Verwenden Sie dieses Bookmarklet:

javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

Erläuterung:

  • Diese Einstellung location.hashbewirkt, dass die Seite zu diesem Anker gescrollt wird.
  • Als Sonderfall kann die Einstellung location.hashaufselbstist ein No-Op.
  • Estutscrollen, aber wenn wir es aufetwas anderesund anschließend sofort wieder auf den ursprünglichen Wert zurückgesetzt.
  • Schließlich müssen Bookmarklets null/ undefinedals Endwert haben oder (aus historischen Gründen) ersetzen sie den Seitentext durch ihren Endwert.

[Das Folgende ist nur als „Extrapunkt“ gedacht]

Alternativ könnten wir etwas in der Art der Antwort von user202729 tun. Seine Antwort funktioniert nur mit Ankern, die von gebildet werden <a id="foo">. Sie funktionieren nicht mit Ankern, die verwenden <a name="foo">, z. B. die hier auf SU/SO/SE verwendeten! Wir können diese (möglicherweise mit falschen Positivergebnissen – ich habe diesen Ansatz nicht so sehr erforscht) mit abfangen

javascript: var h = location.hash.slice(1) ; (document.getElementById(h) || document.getElementsByName(h)[0] || document.body).scrollIntoView()

Aber selbst dieser Ansatz schlägt auf Websites wie github.com fehl, die verwenden <a class="anchor" href="#foo">. Soweit ich weiß, ist dieser Ansatz nicht standardisiert und erfordert benutzerdefiniertes JavaScript. Mein ursprünglicher Ansatz oben funktioniert bei allen drei Ankerstilen.

ps Ich liebe die Zusammenarbeit von Ideen, die von SE kommen können. Lesen Sie die Antwort von user202729 zusammen mit Dean Hardings Antwort aufWie scrollt man eine HTML-Seite zu einem bestimmten Anker?gab mir die Ideen, die ich brauchte, um zu experimentieren und mir meinen Weg zu meiner Antwort zu bahnen.

Antwort3

Als Ergänzung zur Lösung von @Noach wollte ich Informationen zum Erstellen eines Bookmarklets hinzufügen. Bookmarklets sind Browser-Lesezeichen, die JavaScript ausführen, anstatt eine Webseite zu öffnen.

Aufgrund von Syntaxbeschränkungen ist es hier auf superuser.com leider nicht möglich, einen Bookmarklet-Link zu erstellen. Sie müssen ihn also manuell hinzufügen.

Um ein Bookmarklet in Chromium hinzuzufügen, können Sie mit der rechten Maustaste auf Ihre Lesezeichenleiste klicken und dann auf „Seite hinzufügen...“ klicken.
Alternativ können Sie zu Ihrem Lesezeichen-Manager gehen, mit der rechten Maustaste klicken und auf „Neues Lesezeichen hinzufügen“ klicken:

Fügen Sie im Feld „Name“ ein re-anchor. Dieser Text wird in der Lesezeichenleiste angezeigt. Fügen Sie
im Feld „URL“ einjavascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

Bildbeschreibung hier eingeben

Platzieren Sie dann das neu erstellte Bookmarklet irgendwo in der Leiste, damit Sie bei Bedarf darauf klicken können.

verwandte Informationen