Weiß nicht, ob es in deinem Anwendungsfall hilfreich sein könnte, denn es handelt sich hierbei um experimentelle Technologie, allerdings möchte ich ergänzend eine CSS-Only Lösung hinzufügen.

Was die Kompatibilität angeht: Die Lösung wird nur vom Firefox weitgehend unterstützt. IE und Safari sollen wohl auch hier und da was umgesetzt haben, allerdings sollten das wohl sehr unfertige Lösungen sein.

Desweiteren werden im Moment größere Änderungen an dem Modul vorgenommen, das heißt also dass einige Eigenschaften sehr wahrscheinlich abgeschafft werden.

Für deinen Fall kann das CSS Modul "CSS Scroll Snap Points Moduel Level 1" von Interesse sein. Dabei lassen sich Snap-Points in einem scrollbaren Container festlegen, zu denen automatisch hingescrollt werden wenn in die entsprechende Richtung gescrollt wird.

Relevant sind dabei die Eigenschaften scroll-snap-type (womit sich die Art und Weise festlegen lässt) und scroll-snap-points-y. (bzw. scroll-snap-points-x bei horizontalem Scrolling)

Letztere Eigenschaft (scroll-snap-points-x bzw. scroll-snap-points-y) fallen übrigens unter den o.g. Änderungen, d.h. diese werden abgeschafft werden.

Hier eine kleine Demo: (Funktioniert wohl nur im Firefox 39+):
https://jsfiddle.net/ke27ffut/

Genauere Informationen kannst du hier entnehmen:
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-points-y
https://developer.mozilla.org/en-US/docs/tag/CSS%20Scroll%20Snap%20Points

Hier ein genereller Überblick über die ganzen Eigenschaften mit Erklärungen: (Funktionieren alle aber nicht zwingend)
https://css-tricks.com/introducing-css-scroll-snap-points/

Und hier nochmal ein Link zur W3C-Spezifikation des Moduls:
https://www.w3.org/TR/css-snappoints-1/

...zur Antwort

Dafür gibt es das wheel-Event:

https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Browser\_compatibility

Über deltaY kannst du herausfinden, in welche Richtung gescrollt wurde. Anschließend kannst du mittels scrollTop auf dein scrollbares Element (bspw. der Inhaltswrapper) die aktuelle Scrollposition herausfinden.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Danach kannst du mittels element.getBoundingClientRect() bzw. mittels $(element).position (wenn du jQuery nutzt) die Position aller Elemente vergleichen und das nächste Element in der jeweiligen Richtung aussuchen.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
https://api.jquery.com/position/

Bei getBoundingClientRect musst du aufpassen, da es die Position relativ zum Viewport wiedergibt, d.h. du müsstest die Werte von dem Elternelement nochmal abziehen. Die einfachere Variante wäre jQuery.

Danach mittels scrollTop zu der Position scrollen.

...zur Antwort

Du könntest das Anchor-Element mittels position relative um die Höhe des Headers nach oben verschieben, wenn ich dich richtig verstanden habe:

a.anchor {
position: relative;
top: -80px;
}

---

<h1>
<a class="anchor" id="testanchor"></a>
Testanchor
</h1>

Demo: https://jsfiddle.net/8z06d8r1/

...zur Antwort
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.