<div class="wrapper">
  <article class="flow">
    <h1>My pizza dough recipe</h1>
    <p>
      <a href="#recipe" class="button">Skip to the recipe</a>
    </p>
    <p>
      Here are several paragraphs of back-story: Fusce dapibus, tellus ac cursus
      commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
      risus. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis
      euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras
      mattis consectetur purus sit amet fermentum.
    </p>
    <p>
      Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh
      ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas
      eget quam. Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget
      quam.
    </p>
    <p>
      Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta
      gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in,
      egestas eget quam. Donec id elit non mi porta gravida at eget metus. Morbi leo
      risus, porta ac consectetur ac, vestibulum at eros.
    </p>
  </article>
  <hr />
  <main tabindex="-1" id="recipe">
    <article class="flow">
      <h2>Here is the actual recipe</h2>
      <p>
        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
        dui. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.
      </p>
      <p>
        Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh
        ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas
        eget quam. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget
        quam.
      </p>
      <p>
        Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta
        gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in,
        egestas eget quam. Donec id elit non mi porta gravida at eget metus. Morbi leo
        risus, porta ac consectetur ac, vestibulum at eros.
      </p>

      <p>
        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
        dui. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.
      </p>

    </article>
  </main>
</div>

main {
  scroll-margin-top: 2em;
}