<div class="scroll-behavior-auto">
<h3>scroll-behavior:auto;</h3>
<nav id="first">
<a href="#one">1</a>
<a href="#two">2</a>
<a href="#three">3</a>
</nav>
<div class="scrolling-auto">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
</div>
</div>
<div class="scroll-behavior-smooth">
<h3>scroll-behavior:smooth;</h3>
<nav id="second">
<a href="#four">1</a>
<a href="#five">2</a>
<a href="#six">3</a>
</nav>
<div class="scrolling-smooth">
<div id="four">One</div>
<div id="five">Two</div>
<div id="six">Three</div>
</div>
</div>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.scroll-behavior-auto {
margin-right: 25px;
}
h3 {
text-align: center;
}
#first, #second {
background-color: #2a9d8f;
display: block;
padding: 15px 0;
text-align: center;
width: 200px;
}
#first a {
color: #fff;
margin: 0 1em;
text-decoration: none;
}
#second a {
color: #fff;
margin: 0 1em;
text-decoration: none;
}
.scrolling-auto {
background-color: #e9c46a;
display: block;
height: 200px;
overflow-y: scroll;
text-align: center;
width: 200px;
}
.scrolling-smooth {
background-color: #e9c46a;
display: block;
height: 200px;
overflow-y: scroll;
text-align: center;
width: 200px;
scroll-behavior: smooth;
}
#one, #two, #three, #four, #five, #six {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.