Scrolling to an element with scrollIntoView or with a #
I first used #'s to scroll but it doesn't center the element and it just stops at the start of element. I need to view the element at center, scrollIntoView works perfectly fine but I don't want to use JavaScript for like this easy task, is it possible with plain CSS and HTML?
12 Replies
Maybe I couldn't explain it clearly, when I click the "Hakkımızda" link, it works like photo 2, but I want it to works like photo 3. I gave the scroll-padding-top property to "#hakkimizda" section in CSS but seems like it did nothing, could I be using property wrong?
Navbar
Photo 2
Photo 3
#hakkimizda {}
targets an element with that id, not an element with #hakkimizda
as href
You can probably do something like
though it's probably easier to make a more generic class, considering you have more buttons and links
otherwise, you'll have to share a function example, preferably a minimal reproduction in codepen or similar, or otherwise a live version of the sitethanks, do you have any idea is there any performance issues with using scrollIntoView? I couldn't find anything on the internet.
scroll-padding
should be applied on the scrolling container:
https://developer.mozilla.org/en-US/play?id=vgRyeVtRkERnCB2v6uUAwu6TSnv1Um%2F7Hj59N9JK5gaDVKzCByra7ve3x99QBa2y3PNpFHNjY0vSorMtPlayground | MDN
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
click run to see the code idk y it doesn't execute them immediately unlike other playground
putting scroll-padding-top to :root worked thanks!
Just wanted to say that I like the design style you're going for, especially with the glassmorphism nav 🙂
thanks ❤️