<style>
.spacer {
height: 100vh;
}
a {
color: #3d3d3d;
font-family: Arial, Helvetica, sans-serif;
}
/* The magic one liner that allows for smooth scrolls */
html {
scroll-behavior: smooth;
}
/* Removes the animation for users that don't prefer it */
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
</style>
<h1 id="top"><a href="#middle">Let's go to the middle of the page</a></h1>
<div class="spacer">
</div>
<h1 id="middle"><a href="#bottom">Go to the bottom?</a></h1>
<div class="spacer">
</div>
<h1 id="bottom"><a href="#top">Nah, let's go back to the top</a></h1>
Comments