Demo: CSS scroll-margin-block

<div class='container'>\n    <h2 id='section1'>Section 1</h2>\n    <p>This is some content in section 1.</p>\n    <h2 id='section2'>Section 2</h2>\n    <p>This is some content in section 2.</p>\n    <h2 id='section3'>Section 3</h2>\n    <p>This is some content in section 3.</p>\n    <a href='#section1'>Go to Section 1</a>\n    <a href='#section2'>Go to Section 2</a>\n    <a href='#section3'>Go to Section 3</a>\n</div>

.container {\n    height: 200vh; // Make the container tall for scrolling\n    padding: 20px;\n} \n\nh2 {\n    scroll-margin-block: 100px; // Creates a margin of 100px above and below the headings when scrolled into view\n    margin-top: 50px;\n    padding: 10px;\n    background-color: lightblue;\n} \n\np {\n    margin: 20px 0;\n}

// No JavaScript required for this demo

Section 1

This is some content in section 1.

Section 2

This is some content in section 2.

Section 3

This is some content in section 3.

\n Go to Section 1\n Go to Section 2\n Go to Section 3\n