<div class="scroll_example">
<nav class="scroll_nav">
<a href="#section_1">1</a>
<a href="#section_2">2</a>
<a href="#section_3">3</a>
</nav>
<div class="scroll_cnt">
<div id="section_1">1</div>
<div id="section_2">2</div>
<div id="section_3">3</div>
</div>
</div>
body {
background: #191819;
overflow: hidden;
}
.scroll_example {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.scroll_nav {
width: 100%;
}
.scroll_nav a {
display: inline-block;
text-decoration: none;
text-align: center;
color: #fff;
width: calc(100% / 3 - 5px);
background: #222;
padding: 10px 0;
}
.scroll_nav a:nth-child(2) {
background: #1d1d1d;
}
.scroll_cnt {
display: block;
color: #fff;
width: 100%;
height: 150px;
overflow-y: scroll;
scroll-behavior: smooth;
}
.scroll_cnt div {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
.scroll_cnt div:nth-child(1) {
background: #333;
}
.scroll_cnt div:nth-child(2) {
background: #444;
}
.scroll_cnt div:nth-child(3) {
background: #555;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.