US04-02: Trainerprofil (Platzhalter) und Kontakt mit Weiterleitung zu tri-hub.de/kontakt#kontaktinfos #9
3015351
3016801
3014931
Loading…
Reference in New Issue
There is no content yet.
Delete Branch "feature_US04-02"
Deleting a branch is permanent. Although the deleted branch may exist for a short time before cleaning up, in most cases it CANNOT be undone. Continue?
Was
Neuer Bereich „Vereinbare ein persönliches Gespräch“ unter dem Ablauf (US04-02).
User Story
Als Besucher möchte ich über ein Kontaktformular auf der Website den Trainer
anschreiben können, um zu klären, ob die Ernährungsberatung zu mir passt.
Geänderte Dateien
Checkliste
Offene Punkte
Der Link https://tri-hub.de/kontakt#kontaktinfos ist korrekt, springt aber nur
manchmal zum Abschnitt.
Ursache: tri-hub.de baut die Inhalte per JavaScript auf. Der Browser sucht den
Anker, bevor der Abschnitt existiert (Timing-Problem, abhängig von Gerät,
Verbindung und Cache).
Lösung: Nur auf tri-hub.de möglich. Nach dem Rendern selbst zum Anker scrollen
(Scroll-to-Hash).
Code Beispiel:
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
// Scrollt nach dem Rendern zum Anker aus der URL (z. B. /kontakt#kontaktinfos).
// Versucht es bis zu 2 Sekunden lang, falls der Abschnitt erst später erscheint.
export function ScrollToHash() {
const { pathname, hash } = useLocation();
useEffect(() => {
if (!hash) return;
let tries = 0;
const timer = setInterval(() => {
const el = document.getElementById(hash.slice(1));
if (el || ++tries > 20) {
clearInterval(timer);
el?.scrollIntoView({ behavior: "smooth", block: "start" });
}
}, 100);
return () => clearInterval(timer);
}, [pathname, hash]);
return null;
}
Testen