Frage Sprungmarken & Anker - Syntax und Funktion - html/CSS/jQuery

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ansophie

Mitglied
17 August 2019
95
2
8
Hallo,

Ich hoffe, ihr seid wohlauf?!

Momentan suche ich nach der korrekten Syntax für Anker und Sprungmarken, die dann natürlich auch ordentlich funktionieren sollen.
Zunächst mal ein paar Basics zur Überprüfung.

Bsp: von einem Link auf der Seite A zu einer Überschrift auf Seite B springen.

Sprungmarke auf Seite A: <a href=“/Seite-B.html#Nr_1“>Spring zu Nr. 1 auf Seite B</a>.
Anker auf Seite B: <h1 id=„Nr_1“ name=„Nr_1“>Nr. 1</h1>.

Die Sprungmarke auf eine andere Seite braucht die Angabe der relativen URL.

1) Stimmt es, dass es ausreicht, wenn man bei einer Sprungmarke innerhalb derselben Seite nur ein # ohne relative URL schreiben kann?
Oder ist es doch besser mit einer relativen URL? Oder doch gleich die absolute URL?

2) "/" gibt doch an, dass es im selben Hauptverzeichnis liegt? Ist es dann überhaupt notwendig?
Wenn ich aus einem tieferliegenden Verzeichnis in ein höheres zurückwill, muss ich "/Ordnername/seitenname.html" angeben?
Wann oder warum verwendet man "./" oder "../".



Was die Funktion betrifft, sind mir 3 Probleme aufgefallen, wo ich weder Ursache, noch Lösung kenne.
Ich bitte um euren Rat, weil mich meine Recherche grad nur noch mehr verunsichert hat.

1) Wenn ich auf die Sprungmarke klicke, springt es zwar zum gewünschten Textteil, allerdings immer unterhalb der zugehörigen Überschrift. Die Überschrift ist nicht mehr zu sehen. kennt jemand von euch dieses Phänomen? Wie kann man das ändern?

Ich hab mich gefragt, ob das vielleicht mit dem sticky header und der Höhe zusammenhängt, probiert hab ich noch nix, weil ich nicht weiß, an welcher Schraube ich da drehen soll.

2) Statt dem Sprung soll gescrollt werden.
Habe im css html { scroll-behavior: smooth; } eingetragen.
Das funktioniert sowohl auf derselben seite als auch, nach dem tatsächlichen Sprung, auf eine andere Seite sehr schön.
Aber:

Wenn ich den scroll-up-button klicke, der über jQuery läuft, dann beginnt das Raufscrollen ein paar Zentimeter zaghaft und dann scrollt es hoch, als wär eh nix gewesen.
Javascript:
$(".btn__scroll-up").click(function () {
        return $("html, body").animate({
            scrollTop: 0
        }, 800), !1
    });
Woran liegt das?

3) Seit Neuestem muss ich manchmal 2x auf eine Sprungmarke klicken, damit der Sprung innerhalb derselben Seite ausgelöst wird. Beim 1. Klick zuckt die Seite kurz, bleibt aber dort wo sie ist.
"Manchmal" bedeutet, es war so in Chrome (Mac und mobil auf Android), ebenso in der live preview in Brackets.
Nachdem ich das Cache gelöscht hab, funktioniert es wieder, bis es dann wieder nicht geht.
(Der Sprung auf eine andere Seite funktioniert jederzeit tadellos, vorausgesetzt der Pfad ist richtig :) )

Hat das schon mal jemand von euch beobachtet? Gibts dafür eine Erklärung und ev. auch eine Lösung?

lg, ansophie
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
Zu dem zweiten 1): Deine Vermutung ist genau richtig, es liegt an dem sticky Headder: Der Browser scrollt zwar so, dass der Anker genau oben im Browserfenster steht aber der Header überdeckt den Inhalt an der Stelle. Eine Lösung findest Du hier:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
Zu dem zweiten 2) wäre meine Idee, einfach einen Link zu verwenden, der auf den Seitenanfang führt. Dann wirkt auch auf diesen das smooth-Scrolling und Du kannst auf jQuery verzichten:
(der Link befindet sich ganz rechts unten)
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
1) Stimmt es, dass es ausreicht, wenn man bei einer Sprungmarke innerhalb derselben Seite nur ein # ohne relative URL schreiben kann?
Ja, das stimmt.

Oder doch gleich die absolute URL?
Es ist empfehlenswert, absolute URLs soweit es geht zu vermeiden. Dann hat man keine Probleme, wenn man mal mit der HP auf eine andere Domain umzieht oder mit einem Teil in ein anderes Verzeichnis oder wenn man lokal testet.
 

Ansophie

Mitglied
17 August 2019
95
2
8
hey,
danke für die links.

zum demo flexlayout:
Die css-angaben betreffend den sticky header sind bei mir ähnlich, allerdings verwende ich keinen overflow-y: scroll;.
Leider werden die überschriften, wenn ich die als sprungmarken definiere, genauso auch in dieser Demoversion verschluckt. Warum?

ein anderer Versuch:
Wenn ich zb im css bei h1 und h2 scroll-margin-top: 2rem; ergänze, dann scheint es in chrome zu funktionieren, nicht aber in safari (beides live preview in visual code und brackets).
auf caniuse steht dazu eigentlich nicht, dass safari andere/zusätzliche prefixes benötigt.
gibts dazu ein bsp. wo man das gut nachvollziehen kann? die anleitungen auf kulturbanause, developer oder gomakethings sind zwar nicht schlecht, helfen aber nicht.

zum jquery scroll-up button:
ich wollte den button eben ab einer bestimmten höhe anzeigen lassen, mit einem "zurück zum seitenanfang"-anker, glaub ich, lässt sich das ja nicht einrichten, oder doch?

lg
 

Ansophie

Mitglied
17 August 2019
95
2
8
hey, ich hab gerade eben etwas gefunden, das die die Überschriften auf die richtige Höhe springen lässt, nur der scroll up button, der scheint zaghaft zu bleiben.



:target:before {
content: "";
display: block;
height: 80px; /* same as your fixed header height */
margin: -80px 0 0; /* negative fixed header height */
}


ist das bekannt? kann/darf man das anwenden, oder führt das zu bugs?
ich frage, weil ich noch nicht 100% durchschaut hab, warum das funktioniert, wenn man der Sprungmarke selbst kein class zuweist.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
zum demo flexlayout:
Die css-angaben betreffend den sticky header sind bei mir ähnlich, allerdings verwende ich keinen overflow-y: scroll;.
Leider werden die überschriften, wenn ich die als sprungmarken definiere, genauso auch in dieser Demoversion verschluckt. Warum?
Bei mir wird nichts verschluckt. Es funktioniert jedoch nur, wenn man den Header nicht als sticky oder fixed anlegt.

scroll-margin-top: 2rem; macht nur Sinn im Zusammenhang mit Scrollsnap. Verwendest Du das? Wenn nicht, ist es Glückssache, ob und wie scroll-margin-top funktioniert.

zum jquery scroll-up button:
ich wollte den button eben ab einer bestimmten höhe anzeigen lassen, mit einem "zurück zum seitenanfang"-anker, glaub ich, lässt sich das ja nicht einrichten, oder doch?
Das sind jetzt zwei unterschiedliche, unabhängige Dinge:
a) Bei Klick wird auf den Seitenanfang gesprungen - geht problemlos mit einem Anker.
b) Der Button taucht erst auf, wenn man nach unten scrollt - das wird nicht ohne Javascript gehen.

Das mit target ist eine trickreiche Sache und funktioniert wahrscheinlich. Nur ein wenig undurchsichtig.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
Du schreibst ja selbst, dass Du es nicht 100 % durchschaust, daraus entsteht schon ein Risiko in der Form, dass es vielleicht nicht mehr funktioniert, wenn Du es veränderst, um es an deine Seite anzupassen.
 
Werbung: