zum nächsten Titel springen

[SandraB]

Hallo,

ich suche eine Möglichkeit vom Header welcher oben am Bildschirm fixiert ist zu den einzelnen Menüpunkten zu springen.
Bisher habe ich es folgendermaßen gelöst:

<div id="menu-wrapper">
<div id="menu" class="menu">
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
</div>
</div>

und in den betreffenden Menüs:

<section id="a" class="clearfix">
<p>BLABLA A</p>
</section>

<section id="b" class="clearfix">
<p>BLABLA B</p>
</section>


Leider ergeben sich durch diese Art und Weise zwei Probleme:

1) auf mobilen Devices scheinen diese Menülinks nicht zu gehen.

2) dadurch, dass ich das Menü oben fixiert habe zeigt er die gewünschte Seite zu weit oben an. Gibt es irgend eine Lösung mit der die Seite etwas unterhalb des headers angezeigt wird? Oder sogar zentriert?

 

[threadi]

Der HTML-Code deines Menüs ist kaputt. Dort fehlt ein <ul> und </ul>. Könnte ein Grund für Fehlerverhalten sein ..

Wenn Du den Inhalt des Ankers weiter unten anfangen lassen willst, schiebe ihn per padding ein Stück weiter runter innerhalb des <section>-Elements.

 

[SandraB]

Danke! Die <ul> hatte ich dummerweise nicht abgetippt. Aber waren schon im Code drin.
Hat nun prima geklappt.

Gibt es eine möglichkeit langsam zu den Menüs zu scrollen , lässt sich sowas mit html umsetzen?

Viele Grüße

 

[Tronjer]

Mit HTML nicht, aber mit jQuery. Dafür gibt es die Methoden animate() und scrollTop.

 

[threadi]

Und da jQuery eigentlich auch nur JavaScript ist: man kriegt es auch mit JavaScript alleine hin. Siehe:
http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript