Ist es möglich die Scroll-Position zu verändern in HTML/CSS?
Ich habe einen festen Header, welcher 7% der Seite beansprucht. Wenn ich jetzt auf einen Anker klicke, der zu einer Section führt (also z.B '#home') dann Scrollt der Browser immer so weit, bis die Section ganz oben auf der Seite ist, also unter dem Header. Die Scroll-Position müsste also um 7% verschoben sein. Ist das ohne JavaScript möglich?
3 Antworten
https://pixelflips.com/blog/anchor-links-with-a-fixed-header
Du kannst auch mal versuchen, im css mit body { scroll-margin-top: 100px; } zu experimentieren, aber diese CSS-Eigenschaft kann noch nicht jeder Browser.
Bei beiden Versionen hast du das Problem, das du eine feste Höhe des Bereichs (in px) brauchst. Auslesen und dynamisch setzen braucht JS.
Evtl. kann es auch sein, das das scroll-margin-top: 100px; an html statt an body dran muss...
Warum ist der Header denn nicht gleich in der Section mit drin? Wenn der Aufbau in dieser Art ist, dann ist der Header auch sichtbar:
<section id="home">
<header>…</header>
…
</section>
Der Header ist fixiert und stellt den Header der Website dar.
Die Website hat mehrere Sektoren.
Soweit ich weiß ist CSS leider noch nicht so weit. Könntest aber mal in den Eigenschaften von CSS3 nachschauen. Ansonsten würde ich sowas mit jQuery/JavaScript lösen.