SOURCE

<h1>Scroll Margin</h1>

<div class="sidebar">
	<nav class="sticky">
		<ul class="list-inline">
			<li><a href="#a">Section A</a></li>
			<li><a href="#b">Section B</a></li>
			<li><a href="#c">Section C</a></li>
			<li><a href="#d">Section D</a></li>
		</ul>
	</nav>
</div>

<main>
	<article class="section" id="a">
		<h2>Section A</h2>
	</article>
	<article class="section" id="b">
		<h2>Section B</h2>
	</article>
	<article class="section" id="c">
		<h2>Section C</h2>
	</article>
	<article class="section" id="d">
		<h2>Section D</h2>
	</article>
</main>

/**
 * Smooth scrolling on the whole document
 */

html {
    scroll-behavior: smooth;
}

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


/**
 * Layout
 */

body {
    margin: 0 auto;
    max-width: 40em;
    width: 88%;
}

.section {
    color: #ffffff;
    height: 75vh;
    margin: 0;
    scroll-margin-top: 1em;
}

#a {
    background-color: #0074d9;
}

#b {
    background-color: #2ecc40;
}

#c {
    background-color: #ff851b;
}

#d {
    background-color: #b10dc9;
}

h2 {
    margin: 0;
    padding: 0;
}


/**
 * Sticky navigation
 */

.sticky {
    background-color: #ffffff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}


/**
 * Display lists on a single line.
 * @bugfix Prevent webkit from removing list semantics
 * 1. Add a non-breaking space
 * 2. Make sure it doesn't mess up the DOM flow
 */

.list-inline {
    list-style: none;
    margin-left: -0.5em;
    margin-right: -0.5em;
    padding: 0;
}

.list-inline > li {
    /* display: inline-block; */
    display: block;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.list-inline > li:before {
    content: "\200B";
    /* 1 */
    position: absolute;
    /* 2 */
}