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
serkan
serkan17mo 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;
}
serkan
serkan17mo ago
Navbar
serkan
serkan17mo ago
Photo 2
serkan
serkan17mo ago
Photo 3
Jochem
Jochem17mo 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
serkan
serkan17mo ago
thanks, do you have any idea is there any performance issues with using scrollIntoView? I couldn't find anything on the internet.
phyrasaur
phyrasaur17mo ago
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
phyrasaur17mo ago
click run to see the code idk y it doesn't execute them immediately unlike other playground
serkan
serkan17mo ago
putting scroll-padding-top to :root worked thanks!
vince
vince17mo ago
Just wanted to say that I like the design style you're going for, especially with the glassmorphism nav 🙂
serkan
serkan16mo ago
thanks ❤️
Want results from more Discord servers?
Add your server