Per Scrollrad von Anker zu Anker?

Hallo,

ich habe bei meiner Seite 3 Anker erstellt. Diese nutze ich um über Navigationsleiste direkt zu dem gewünschten Ziel zu kommen. Jetzt würde ich gerne noch hinzu fügen das man auch ohne anklicken der Icons zu dem jeweiligen Anker springen kann. Per Mausrad. Jetzt ist es noch so das man elendig lange scrollen muss um zum Anker zu kommen aber ich würde es gerne so machen das man direkt automatisch zu dem höheren Anker kommt. Weiß einer wie ich das machen kann? Hoffe ihr wisst überhaupt was ich meine :D

Danke schon mal im Voraus!

PS.: Ich weiß das es mit Javascript etc. machbar ist allerdings weiß ich nicht wie man so etwas macht.

Hier die Seite: https://traurigerdetlef.lima-city.de/

Answer 1

[Sarkophator]

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.