nicht angemeldet
Erstellen eines Buttons, der zum Seitenanfang zurück verlinkt
Rolf B
Auge
MudGuard
TS
marctrixHallo, Ich programmiere in der Schule gerade eine Homepage mit Phase5. Ich wollte fragen wie ich einen “Knopf” oder Pfeil programmieren kann, der mich am Ende der Seite wieder zum Seitenanfang verlinkt, wenn ich ihn drücke.
Vielen Dank.
-
Hallo Fabienne,
dazu verwendet man eine Hash-URL:
<a href="#">Top</a>Was ist das? URLs bestehen aus Komponenten wie Protokoll (http:), Host (forum.selfhtml.org), Pfad zur Ressource (self/2019/may/16/erstellen-eines-buttons-der-zum-seitenanfang-zurueck-verlinkt) und Name der Ressource (1748845). Das sind jetzt die Komponenten der URL dieses Threads.
Dahinter kann man noch IDs auf einer Seite anspringen, wie es das Forum hier auch tut, z.B. #m174845.
Diese Komponenten sind teilweise optional. Die vollständige Adresse dieses Threads hier, mit Anspringen des Eröffnungspostings, ist
Man kann aber auch Teile davon weglassen. Der Browser ergänzt das dann basierend auf der Adresse der Seite, die gerade angezeigt wird. Beispiele:
Beginn mit //: Browser ergänzt das Protokoll https:
//forum.selfhtml.org/self/2019/may/16/erstellen-eines-buttons-der-zum-seitenanfang-zurueck-verlinkt/1748845#m1748845
Beginn mit /: Browser ergänzt Protokoll und Host, ggf. noch den Port - also
https://forum.selfhtml.org. Wenn kein Hash-Teil hinten dran steht, wird zum Seitenanfang gesprungen./self/2019/may/16/erstellen-eines-buttons-der-zum-seitenanfang-zurueck-verlinkt/1748845
Keine Pfade, nur ein Ressourcenname. Browser würde https://forum.selfhtml.org/self/2019/may/16/erstellen-eines-buttons-der-zum-seitenanfang-zurueck-verlinkt davor setzen (und mutmaßlich nichts finden)
1741231#m1748845
Und schließlich: Nur ein Hash. Der Browser würde die Adresse der aktuellen Seite davor setzen, und wenn diese Seite schon aktiv ist, nur auf der Seite navigieren ohne zum Server zu gehen:
#m1749999
Die spezielle Hash-Erweiterung # steht für den Seitenanfang. href="#" wird demzufolge interpretiert als Anfang der gerade geladenen Seite.
Wenn Du nicht ganz an den Anfang willst, sondern zum Beginn eines Artikels, gib dem eine ID (z.B. id="artikel4711") und setze am Ende einen Link mit href="#artikel4711".
Rolf
--
sumpsi - posui - clusi -
Hallo
Ich programmiere in der Schule gerade eine Homepage mit Phase5. Ich wollte fragen wie ich einen “Knopf” oder Pfeil programmieren kann, der mich am Ende der Seite wieder zum Seitenanfang verlinkt, wenn ich ihn drücke.
Benutze einen Link, der ein Sprungziel innerhalb der Seite als Ziel hat. Du brauchst, damit das in allen Browsern funktioniert, in deinem HTML-Dokument ein Element mit der ID „top“, für diesen Zweck eines am Anfang des Dokuments.
<!-- … --> <body> <header id="top"> <h1></h1> </header> <!-- weiter unten im Dokument --> <a href="#top">nach oben</a> </body> </html>Und vergiss bitte den Editor Phase5. Der war mal gut, aber ist es nach heutigen Maßstäben längst nicht mehr. Ich empfehle stattdessen, Notepad++ zu benutzen.
Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett-
Hallo
Du brauchst, damit das in allen Browsern funktioniert, in deinem HTML-Dokument ein Element mit der ID „top“, für diesen Zweck eines am Anfang des Dokuments.
Um zu konkretisieruen, warum ich hier fest von der ID „top“ ausgehe. Im Internet Explorer war schon vor Urzeiten [1] ein Automatismus eingebaut, der bei einem Link mit dem Ziel
#topan den Anfang der Seite sprang, selbst, wenn es überhaupt kein Ziel dieses Namens gab. Keine Ahnung, ob dieses Feature bis in die aktuelle Version oder bis wann sie Bestand hat(te), aber damit hat es sich quasi eingebürgert, genau diese ID für diesen Zweck zu benutzen.Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett
Mindestens in den IE-Versionen 5.5 und 6 gab es dieses Feature. Die waren damals marktbeherrschend (siehe „Browserkriege“), womit sich auch die Benutzung von
#topverbreitete. ↩︎
-
-
Hi,
Ich wollte fragen wie ich einen “Knopf” oder Pfeil programmieren kann, der mich am Ende der Seite wieder zum Seitenanfang verlinkt, wenn
ich ihn drücke.
der ist schon fertig auf der Tastatur eingebaut. Pos1 oder Home steht drauf …
cu,
Andreas a/k/a MudGuard-
Hallo Andreas,
ich habe hier nur einen Knopf mit einem Häuschen darauf. Wenn ich den antippe, ist der Browser weg. Und nun?
Rolf
--
sumpsi - posui - clusi -
Habe ich auf meinem Handy nicht! Und gerade da nervt es total wenn ich sehr weit unten bin und wieder ganz nach oben springen muss, weil die Navigation sich nicht mitbewegt.
-
und wieder ganz nach oben springen muss, weil die Navigation sich nicht mitbewegt.
Dann wäre es aber sinnvoller die Navigation von überall her zugreifbar zu machen, statt überall auf der Seite einen solchen Button zu platzieren.
-
Hello,
und wieder ganz nach oben springen muss, weil die Navigation sich nicht mitbewegt.
Dann wäre es aber sinnvoller die Navigation von überall her zugreifbar zu machen, statt überall auf der Seite einen solchen Button zu platzieren.
In manchen Browsern kann man solch ein Steuerelement auch in der Konfiguration einschalten. Das erscheint dann immer automatisch (kurzzeitig) am unteren Rand, wenn man scrollt und der Viewport kürzer ist, als das Dokument, und der obere Rand außerhalb des Viewports liegt.
Glück Auf
Tom vom Berg--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.
-
-
-
-
Hej Fabienne,
Ich programmiere in der Schule gerade eine Homepage mit Phase5.
Schade, dass man in Schulen immer mit so altem Kram arbeiten muss. Ich hoffe, da wird sich in Zukunft mal was verbessern.
Ich wollte fragen wie ich einen “Knopf” oder Pfeil programmieren kann, der mich am Ende der Seite wieder zum Seitenanfang verlinkt, wenn ich ihn drücke.
Zunächst einmal etwas Grundwissen. Offenbar wird nicht nur bei Euch in der Schule nicht mit den ersten Dingen begonnen.
HTML steht für Hyper-Text Markup Language, also auf deutsche Hyper-Text Auszeichnungssprache. Das heißt, HTML dient dazu eine reine Text-Datei mit Informationen zur Bedeutung der enthaltenen Texte anzureichern.
Dafür stellt HTML einen Satz an Elementen bereit und definiert in der Spezifikation die Bedeutung diese Elemente.
Das Element
buttondient dazu eine interaktive Schaltfläche auszuzeichnen. Drückt man eine solche Schaltfläche, wird eine Aktion ausgelöst und etwas ändert sich auf der Seite, Daten werden verschickt, es wird etwas gespeichert - was auch immer.Das Element
ain Kombination mit dem Attributhrefdient dazu, an eine andere Stelle springen - auf eine andere Seite im Web, auf eine andere Seite in deinem Webauftritt (in einem von beiden vielleicht an eine bestimmte Stelle) oder an eine bestimmte Stelle in der aktuell geöffneten Seite. Zum Beispiel nach "oben".Wenn du von Button oder Pfeil sprichst, höre ich da raus, dass euch das obige nicht beigebracht wurde, weil du optisch "denkst". Du solltest in HTML rein logisch denken: welche Bedeutung hat ein Text — nur so findest du heraus, welches Element du benötigst.
Nachdem nun klar ist, dass das
a-Element benötigt wird, komme ich zu einer Erklärung, warum ich "oben" in Anführungszeichen gesetzt habe. Bisher wissen wir nämlich nicht, was oben ist. Daher kommen auch Lösungsvorschlägen, die vielleicht ungeeignet sind. So der folgende bereits genannte:<a href="#">nach oben</a>Der bringt dich nämlich nicht an einen bestimmten Punkt im Dokument, sondern springt einfach ganz an den Anfang und ich vermute, kaum einer weiß, was das bedeutet (z.B. für Screenreader-Nutzer. Wohin führt dieser Link? Zum
title-Element, zumhtml-Element oder vielleicht doch direkt zumbody?)…Besser ist es daher, selber zunächst den Zielpunkt festzulegen, indem du einem bereits vorhandenen Element die
idtop mitgibst, um überhaupt mal zu definieren, wo "oben" überhaupt ist. Meiner Meinung nach sollte das in fast allen Fällen der Anfang des Artikels sein. Aber wir haben hier schon gehört, der Link kann auch genutzt werden, um die Hauptnavi erreichbar zu machen.Was mich dazu führt mal darüber nachzudenken, was man denn konzeptionell überhaupt vorbereitet hat und wie sich der Link nach "oben" in diese Konzept einfügt. Leider bereiten die meisten Lehrer überhaupt kein Konzept vor, sondern zeigen nur die Technik (oder noch schlimmer, überlassen es den Schülern herauszufinden, was passiert, ohne zu erklären, welche Vor- und Nachteile verschiedene Ansätze haben und wann welcher gewählt werden sollte - dann gilt womöglich auch das absolut absurde Vorgehen als korrekte Lösung, einen Button mit JavaScript zum Seitenanfang zu verlinken).
Was meine ich mit Konzept?
Es gilt als best practice am Seitenanfang ein paar Links anzufügen, direkt am Anfang des
body, mit denen ein bis drei besonders wichtige Stellen im Dokument direkt angesprungen werden können. Das erleichtert vor allem denjenigen die Benutzung, die sich mit der Tabulator-Taste durch die Seiten bewegen. Die müssen dann nämlich nicht jedesmal durch die ganze Navigation tabben, wenn sie Hauptinhalt kommen wollen.Diese Links springen sinnvollerweise die Hauptnavigation an (wenn die nicht direkt danach eh kommt), die Suche und/ oder den Hauptinhalt — nicht mehr einbauen, wenn die Liste zu lang wird, ist die schon wieder lästig.
Meiner Meinung nach wäre es — wenn so eine Liste mit Sprunglinks vorhanden ist, an diese Liste zu springen, wenn man "nach oben" anklickt - weil dann kann man von hier aus wieder schnell sowohl an den Anfang des Hauptinhaltes, zur Navigation oder zur Suche.
Erst wenn man sich ein paar Gedanken gemacht hat, kann man zu einer sinnvollen Lösung kommen, die die Seite besser nutzbar macht.
Hier der Code zu meiner Lösung:
<body> <ul id="ID_top"> <li><a href="#ID_main-nav">zur Hauptnavigation</a></li> <li><a href="#ID_main-search">zur Suche</a></li> <li><a href="#ID_main-content">zum Inhalt</a></li> </ul> […]Viel anderer Code[…] <p><a href="#ID_top">zurück nach oben</a> </body>Wie das dann aussieht (wie ein Link belassen, wie ein Button oder wie ein Pfeil) regelst du dann über CSS — aber das ist dann schon eine ganz andere Frage. 😉
edit: da fehlten ein paar
#im Code, wodurch der nicht funktioniert hätte, selbst wenn (hoffentlich) die entsprechenden Elemente (Haupnavi, Suche, Inhalt) mit IDs ausgezeichnet worden wären.PS: Wie ihr seht, mag ich es, meine eigenen Namen - zumindest im Fall von IDs, weil die doch etwas besonderes sind und ich die selten nutze - mit einem Kennzeichner zu versehen (nämlich
ID_). Beitopmache ich das - bis jetzt - aus alter Gewohnheit nicht (fällt mir jetzt erst auf). Wie es zu dieser Gewohnheit kommt, hat Auge gut erklärt. Wer sich daran stört (mich stört es hier in dem Beispiel das jetzt so zu sehen auch) - soll der Konsistenz halber konsequenterweise auch das Ziel für den nach-oben-LinkID_topnennen - oder kennt jemand einen Browser, der von sich aus noch etwas mit nurtopmacht? - Wobei man das ja mit meiner Lösung wohl ausschließen möchte. Insofern: ich ändere das jetzt auch noch und mache austopID_top. Das PS hier lasse ich stehen, damit die Änderungen am Beitrag nachvollziehbar bleiben.Marc
--
Ceterum censeo Google esse delendam