Smooth Scrolling with just CSS

Smooth Scrolling with just CSS Demo

View Demo Full Screen View Demo New Tab

Smooth Scrolling with just CSS Code

HTML

<nav class="fixed-nav">
	<a href="#pd1" class="jump-link">1</a>
	<a href="#pd2" class="jump-link">2</a>
	<a href="#pd3" class="jump-link">3</a>
	<a href="#pd4" class="jump-link">4</a>
</nav>
<div class="pd pd1 center" id="pd1">Padding Div 1</div>
<div class="pd pd2 center" id="pd2">Padding Div 2</div>
<div class="pd pd3 center" id="pd3">Padding Div 3</div>
<div class="pd pd4 center" id="pd4">Padding Div 4</div>

CSS

html {
  scroll-behavior: smooth;
}
.fixed-nav {
	position:fixed;
	top:0px;
	left:auto;
}
a.jump-link {
	display:inline-block;
	padding:10px;
	border-radius:5px;
}
.center {
	display: flex;
  align-items: center;
  justify-content: center;
}
.pd {
	height:300px;
	width:100%;
}
.pd1 {
	background:pink;
	color:FFF;
}
.pd2 {
	background:blue;
	color:FFF;
}
.pd3 {
	background:teal;
	color:FFF;
}
.pd4 {
	background:orange;
	color:FFF;
}