[CSS] Scrollen naar target na klikken op link

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP er

PHP er

23/05/2021 15:46:10
Quote Anchor link
Hoi,

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

PHP hulp

19/04/2024 12:25:48
 
Rob Doemaarwat

Rob Doemaarwat

23/05/2021 19:01:15
Quote Anchor link
Ik 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.
 
Ward van der Put
Moderator

Ward van der Put

23/05/2021 22:01:47
Quote Anchor link
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/
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.