The problem
You want page navigation and anchor links to scroll smoothly instead of jumping.
The solution
/* Enable smooth scrolling globally */
html {
scroll-behavior: smooth;
}
/* Only for reduced motion preference */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* Scroll snap for sections */
.scroll-container {
scroll-behavior: smooth;
overflow-y: scroll;
scroll-snap-type: y mandatory;
height: 100vh;
}
.scroll-section {
scroll-snap-align: start;
height: 100vh;
}See it live
Put it to work
<!-- Navigation -->
<nav>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<!-- Sections -->
<section id="about">About Us</section>
<section id="services">Our Services</section>
<section id="contact">Contact Us</section>Worth knowing
Respect user preferences with prefers-reduced-motion. Some users may have motion sensitivity.