Smooth Scroll (Pure CSS)

via: https://gist.github.com/zachleat/a7393810acf7890e6bef6a34eaa7b78c

by Adam Culpepper

HTML

<div class="fixed">
	<a href="#link1">link1</a>
	<a href="#link2">link2</a>
	<a href="#link3">link3</a>
	<a href="#link4">link4</a>
	<a href="#link5">link5</a>
</div>

<div class="content">
	<div class="block" id="link1">link1</div>
	<div class="block" id="link2">link2</div>
	<div class="block" id="link3">link3</div>
	<div class="block" id="link4">link4</div>
	<div class="block" id="link5">link5</div>
</div>

CSS

html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* not needed */
html, body {height:100%;}
body {margin:0;}
.content {height:100%; padding-top:50px;}
.fixed {position:fixed; line-height:50px; padding:0 10px; background:rgba(255, 0, 0, 0.30);}
.fixed a {margin-right:10px; color:#000; text-decoration:none;}
.fixed a:hover {text-decoration:underline;}
.block {height:100%; background:lightblue; margin:2px 0; padding:10px; font-size:40px;}