HTML id-Link und navbar

[Pfandfinder]

hallo,

ich habe auf meiner Seite oben eine fixe navbar, die auch beim Scrollen jederzeit dargestellt wird. außerdem verlinke ich mit

<a href="1">

und dann entsprechend bei den Abschnitten mit anchor:

id="1"

zu bestimmten Stellen auf der Seite. Problem ist da ja dann aber, dass die ersten Zeilen unter der navbar sind, bzw. man die halt nicht lesen kann ohne jedes mal etwas hochzuscrollen. ich denke ihr wisst was ich meine.

Kann man das leicht beheben ? ich nutze Bootstrap, falls das hilft.

 

[jb_alvarado]

Wie wäre es wenn du deinen Anker in ein verstecktes Objekt packst, welches vor deinem eigentlichen Ziel kommt?

Also z.B. so:

<div id="1" class="mb-5" />
<div class="mein-interessanter-bereich">
    <!-- Eigentlicher Content -->
</div>

Einfach ein padding-top würde es wohl auch tun, geht mit entsprechenden spacern.

 

[kim88]

Also bevor du mit Padding oder die IDs höher im Markup definierst, dafür gibt es das "scroll-margin-top" CSS.

du kannst im Grunde einfach:

div {
    scroll-margin-top: 50px;
}

nutzen. Statt 50px gibst du dort die Höhe deiner fixen Navbar an.

Es geht auch:

* {
    scroll-margin-top: 50px;
}

damit greift es auf alle Elemente auf die du eventuell mal mit einem Ankerlink verweist.