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

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

Ansophie

Mitglied
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
 
Werbung:
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
 
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.
 
Werbung:
Zurück
Oben