[CSS] Scrollen naar target na klikken op link
PHP er
23/05/2021 15:46:10Hoi,
Ik ben bezig om te scrollen naar een target (<a name=target></a>) door op een link te klikken (<a href=#target>klik hier</a<). Maar, ik heb ook een navigation bar op de mobiele versie.
Wanneer ik dan op de link klik, scrollt hij wel naar boven, maar dan vergeet hij de hoogte van de navigation bar mee te nemen waardoor hij eigenlijk al halverwege de content van die target-alinea is gescrolled.
Weet iemand hoe ik dit kan oplossen? Ik heb al veel Gegoogled op bijvoorbeeld 'scroll bar padding navbar menu' of 'add padding in scrolling target link' maar ik kom er niet uit. Simpelweg zou het mooiste zijn als die scrollfunctie uiteindelijk een functie is waarbij extra padding wordt toegevoegd aan de bovenzijde zodat die eigenlijk iets minder ver scrollt dan echt bovenaan de pagina.
Wie kan mij helpen?
Ik ben bezig om te scrollen naar een target (<a name=target></a>) door op een link te klikken (<a href=#target>klik hier</a<). Maar, ik heb ook een navigation bar op de mobiele versie.
Wanneer ik dan op de link klik, scrollt hij wel naar boven, maar dan vergeet hij de hoogte van de navigation bar mee te nemen waardoor hij eigenlijk al halverwege de content van die target-alinea is gescrolled.
Weet iemand hoe ik dit kan oplossen? Ik heb al veel Gegoogled op bijvoorbeeld 'scroll bar padding navbar menu' of 'add padding in scrolling target link' maar ik kom er niet uit. Simpelweg zou het mooiste zijn als die scrollfunctie uiteindelijk een functie is waarbij extra padding wordt toegevoegd aan de bovenzijde zodat die eigenlijk iets minder ver scrollt dan echt bovenaan de pagina.
Wie kan mij helpen?
PHP hulp
12/10/2024 23:50:53Rob Doemaarwat
23/05/2021 19:01:15Ik neem aan dat je een "sticky" header hebt voor je "navigation bar"? Met behulp van scroll-margin-top kun je dan via CSS regelen dat je target onder deze margin stopt.
Kijk eens hoe ver je met een scroll snap komt. Die heeft een eigen padding om de 'snap' niet pal op de rand van een container te laten landen.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
https://css-tricks.com/practical-css-scroll-snapping/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
https://css-tricks.com/practical-css-scroll-snapping/