Smooth Scrolling Behavior


by Jeremy Caudle
code

Today I'm testing out smooth scrolling. I heard about it on the most recent episode of the Smashing Podcast featuring Chris Ferdinandi.

First Section

Vivamus fermentum velit diam, quis porttitor lacus pretium eu. Quisque neque sem, dapibus eu fringilla ac, malesuada nec tellus. Aliquam vitae ex vitae augue ultrices malesuada. Mauris gravida dui vel dui elementum aliquam. Nam vestibulum pellentesque dui.

Second Section

Donec venenatis commodo mauris eu sagittis. Maecenas ultrices dignissim magna et gravida. Sed a mollis felis. Donec sagittis, massa sit amet tincidunt sodales, ex metus fermentum velit, ut venenatis tellus nunc eu magna.

Third Section

Morbi elit dolor, luctus a malesuada non, elementum et purus. Maecenas eu molestie elit. Quisque quis dui ultrices, accumsan turpis nec, fermentum diam. Suspendisse potenti. Nunc a odio mollis, dapibus odio at, hendrerit lorem. Nam nec pharetra sapien. Etiam condimentum eget libero ut faucibus.

View the code:

HTML and JS 
<div class="codedoodle-block">
<ul class="nav-test">
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>
</ul>
<div class="scroll-container">
<h2 class="spaced" id="first">First Section</h2>
<p>Vivamus fermentum velit diam, quis porttitor lacus pretium eu. Quisque neque sem, dapibus eu fringilla ac, malesuada nec tellus. Aliquam vitae ex vitae augue ultrices malesuada. Mauris gravida dui vel dui elementum aliquam. Nam vestibulum pellentesque dui.</p>

<h2 class="spaced" id="second">Second Section</h2>
<p>Donec venenatis commodo mauris eu sagittis. Maecenas ultrices dignissim magna et gravida. Sed a mollis felis. Donec sagittis, massa sit amet tincidunt sodales, ex metus fermentum velit, ut venenatis tellus nunc eu magna.</p>

<h2 class="spaced" id="third">Third Section</h2>
<p>Morbi elit dolor, luctus a malesuada non, elementum et purus. Maecenas eu molestie elit. Quisque quis dui ultrices, accumsan turpis nec, fermentum diam. Suspendisse potenti. Nunc a odio mollis, dapibus odio at, hendrerit lorem. Nam nec pharetra sapien. Etiam condimentum eget libero ut faucibus.</p> 
</div>
</div>
CSS 
.scroll-container {
scroll-behavior: smooth;
display: block;
width: 100%;
height: 12em;
margin: 0 auto;
overflow-y: scroll; 
}

.codedoodle-block {
	display: block;
	background-color: #00000022;
	padding: 1rem;
	margin: 2rem auto;
	max-width: 40em;
}

.spaced {
margin-top: 2rem;
}

.nav-test {
display: flex;
flex-flow: row;
justify-content: space-around;
align-content: center;
padding: 0;
}

.nav-testl li {
	text-align: center;
	padding: .25rem .5rem;
}

Tags