<nav class="nav"> <a class="scroll-link" href="#link1">Link 1</a> <a class="scroll-link" href="#link2">Link 2</a> <a class="scroll-link" href="#link3">Link 3</a> </nav>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<div class="destination" id="link1"></div>
<h2>Destination 1</h2>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<div class="destination" id="link2"></div>
<h2> Destination 2</h2>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<div class="destination" id="link3"></div>
<h2> Destination 3</h2>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
html, body {
	margin:0;
scroll-behavior: smooth;
}
body {
	padding:110px 0 0
}
.nav {
	position:fixed;
	left:0;
	right:0;
	top:0;
	height:100px;
	background:#f9f9f9;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
	text-align:center;
}
.nav a {
	display:inline-block;
	margin:0 10px;
}
.nav a.current,.nav a:hover {
	background:blue;
	color:#fff
}
h2 {
	background:red;
	color:#fff;
}
.destination {
	position:absolute;
	z-index:-1;
	left:0;
	margin-top:-100px;/* height of nav*/
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.