Kevin Powell - Community•2y ago

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

Jochem•2y ago

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top

serkanOP•2y ago

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?

<li><a href="#hakkimizda">Hakkımızda</a></li>

<li><a href="#hakkimizda">Hakkımızda</a></li>

#hakkimizda {
  margin-top: 7em;
  padding: 0 5em 2em 5em;
  background-color: var(--clr-secondary);
  width: 100vw;
  scroll-padding-top: 5em;
}

#hakkimizda {
  margin-top: 7em;
  padding: 0 5em 2em 5em;
  background-color: var(--clr-secondary);
  width: 100vw;
  scroll-padding-top: 5em;
}

serkanOP•2y ago

Navbar

serkanOP•2y ago

Photo 2

serkanOP•2y ago

Photo 3

Jochem•2y ago

#hakkimizda {} targets an element with that id, not an element with #hakkimizda as href You can probably do something like

a[href="#hakkimizda"] {}

a[href="#hakkimizda"] {}

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 site

serkanOP•2y ago

thanks, do you have any idea is there any performance issues with using scrollIntoView? I couldn't find anything on the internet.

phyrasaur•2y ago

scroll-padding should be applied on the scrolling container: https://developer.mozilla.org/en-US/play?id=vgRyeVtRkERnCB2v6uUAwu6TSnv1Um%2F7Hj59N9JK5gaDVKzCByra7ve3x99QBa2y3PNpFHNjY0vSorMt

Playground | 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.

phyrasaur•2y ago

click run to see the code idk y it doesn't execute them immediately unlike other playground

serkanOP•2y ago

putting scroll-padding-top to :root worked thanks!

vince•2y ago

Just wanted to say that I like the design style you're going for, especially with the glassmorphism nav 🙂

serkanOP•2y ago

thanks ❤️

Gaming

Programming

Scrolling to an element with scrollIntoView or with a #