Twenty Seventeen: Interner Anker schiebt Seite unter fixiertes Header-Menü

Gelöst jela
(@jela)

vor 3 Jahren, 2 Monaten
Hallo,

ich verwende das Theme „Twenty Sventeen“ und möchte auf einer Seite mit gesetzten HTML-Anker für einzelne Blocks (Überschriften) am Anfang der Seite Sprungmarken als (interne) Links auf der Seite setzen. Wenn ich die Links z. B. mit „#Anker1“ setze und anwähle, schiebt sich der Anfang unter das horizontale Menü, das bei „Twenty Sventeen“ beim scrollen fixiert ist. Ich habe schon hier Forum und im Netz versucht eine Lösung zu finden. Das Problem wird zwar mancherorts beschrieben, aber etwaige Lösungen sind leider bei mir erfolglos geblieben.

Hat jemand einen Rat oder Hinweis?

Schöne Grüße
jela
- Dieses Thema wurde geändert vor 3 Jahren, 2 Monaten von jela.

Ansicht von 8 Antworten – 1 bis 8 (von insgesamt 8)

Moderator Hans-Gerd Gerhards
(@hage)

vor 3 Jahren, 2 Monaten

Hallo,
das Problem kenne ich.
Als Workaround setze ich vor dem eigentlichen Ziel über den Block-Editor (Gutenberg) einen Abstandshalter und setze darauf den Anker.
Wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.
Viele Grüße
Hans-Gerd
Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 2 Monaten
Du könntest z.B. mit einer JavaScript-Funktion einrichten, dass nicht ganz so weit runtergescrollt wird. Dazu fügst du in der functions.php eines Child-Themes oder mit dem Plugin Code Snippets folgenden Code ein:
```
add_action( 'wp_head', function () { ?>
<script>

	 !function(o,n){var t=function(){var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({scrollTop:n.offset().top-t},200)};o(n).on("hashchange load",function(){t()})}(jQuery,window);

</script>
<?php } );
```
Das gilt dann für alle Anker.

Die recht pragmatische Lösung von Hans-Gerd gefällt mir aber auch, vorausgesetzt du bist mit den Abständen einverstanden, die dadurch erzeugt werden.

Nachtrag:
Wenn ein größerer Abstand über Zwischenüberschriften erlaubt ist, kannst du auch im Customizer die CSS-Regel h2.anker-mit-offset{ padding-top: 150px; } einfügen und dann der Zwischenüberschrift über die Sidebar unter „Erweitert“ [1] einen Anker-Namen [2] und die CSS-Klasse [3] (bitte hier ohne den Punkt) zuweisen:

(zum Vergrößern anklicken)
- Diese Antwort wurde geändert vor 3 Jahren, 2 Monaten von Bego Mario Garde.
Thread-Starter jela
(@jela)

vor 3 Jahren, 2 Monaten

Hallo zusammen,

danke für die schnellen Rückmeldungen.

@hage
Etwas ähnliches hatte ich auch schon probiert, in dem ich eine Trennlinie zwischen den Textblöcken eingefügt und da den Anker gesetzt habe. Optisch zieht dies allerdings die Textblöcke etwas auseinander, was wiederum beim scrollen unschön daher kommt. Ich kann die Webseite leider noch nicht verlinken, da sie noch nicht öffentlich ist und über ein Plugin eine Vorschaltseite mit „Wartungsmodus“ greift.

@pixolin
Deinen Vorschlag habe ich mit dem Plugin Code Snippets ausprobiert und es funktioniert. Vielen Dank!

Wo ich hier gerade die Experten habe, erlaube ich mir noch ein ergänzende Frage:
Wie kann man denn bei „Twenty Sventeen“ am besten eine „Zurück nach oben“-Funktion realisieren?

Beste Grüße
jela

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 2 Monaten

Abgesehen von diversen Plugins, die ein „Zurück nach oben“-Icon mit Link einfügen, kannst du auch im Footer Text oder ein Bild mit einem Link einfügen:
<a href="#top">Zurück nach oben</a>

(Den Anker #top brauchst du dann nicht mehr einfügen, der wird von jedem Browser als „Start des Dokuments“ interpretiert.)

Moderator Hans-Gerd Gerhards
(@hage)

vor 3 Jahren, 2 Monaten

Hallo @pixolin,
das ist natürlich eine viel bessere Lösung als die von mir 👍
Viele Grüße
Hans-Gerd

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 2 Monaten

@hage Hat da gerade jemand „Streber“ gerufen? 😀
Moderator Hans-Gerd Gerhards
(@hage)

vor 3 Jahren, 2 Monaten
@pixolin nenene – war in der Tat schon ernst gemeint. 😉
- Diese Antwort wurde geändert vor 3 Jahren, 2 Monaten von Hans-Gerd Gerhards.
Thread-Starter jela
(@jela)

vor 3 Jahren, 2 Monaten

@pixolin
Okay, ein Element (Text/Grafik) mit dem Link „#top“ ist eine simple Lösung. Danke auch für diese Info.