<header>
  Fixed Header:  
  <a href="#one">One</a>
  <a href="#two">Two</a>
  <a href="#three">Three</a>
  <a href="#">(Back to Top)</a>
</header>

<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quas aperiam asperiores numquam illum unde minus ipsa reiciendis dolores natus. Eum repellat maiores accusamus soluta accusantium itaque corporis hic architecto.</p>
  <p>Laudantium, impedit. Eius quod harum illum laborum sint cupiditate deserunt? Vero atque delectus iure quisquam aspernatur, ullam suscipit, minima quae quasi sunt provident laborum iusto nemo sit nulla ipsam repellendus!</p>
  <p>Animi exercitationem totam velit deserunt! Asperiores vel animi esse tempora maxime voluptatem nihil assumenda fugit iusto incidunt. Recusandae perspiciatis illo consequatur maxime aliquid, a omnis nobis quibusdam quam modi soluta.</p>
  <p>Voluptatibus porro fugiat ratione exercitationem corporis et eos iusto dolorum deleniti consequatur quam, omnis sint impedit quidem harum asperiores. Cupiditate laboriosam praesentium ipsa cum commodi, mollitia iure culpa blanditiis quas?</p>
  <p>Velit molestias eius nihil facilis veritatis, laboriosam voluptatum, quibusdam adipisci ut laborum perferendis! Sint ea sit deserunt. Sapiente, ex aliquam maxime animi, libero tenetur ducimus, necessitatibus officiis quod perspiciatis nihil!</p>
  <p>Voluptatum quia sed deserunt. Consequatur quod sit facilis unde quo officiis, deserunt magni doloribus ullam quaerat iusto enim tenetur molestiae sunt eveniet quibusdam deleniti incidunt quam modi iste, odit eius.</p>
  <p>Voluptas similique ab at, corporis natus voluptates impedit qui quam, totam, reprehenderit consequuntur rerum laboriosam! Veniam sapiente unde error blanditiis obcaecati ducimus tempora ipsum. Nisi blanditiis eum deleniti tenetur quis.</p>
  <p>Consequatur nam soluta, reiciendis nihil neque facere obcaecati voluptates veniam corporis at beatae numquam veritatis optio et? Aut, veniam ab? Dolorum repudiandae dolores consectetur sint id deserunt soluta quas tempora!</p>
  <p>Corrupti sit rem itaque quasi assumenda. Fuga accusantium culpa suscipit impedit amet ullam quaerat, qui asperiores facere voluptatibus exercitationem libero illum sint ducimus tenetur non alias praesentium, necessitatibus autem provident.</p>
  <p>Officiis, harum nulla? Nam libero amet dicta. Voluptas enim nesciunt nobis consectetur magni, sint labore odio magnam quis aliquid nemo dolorum ducimus, ab voluptatem aspernatur sequi itaque fuga earum dolore.</p>
  <h3 id="one">One</h3>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, soluta. Possimus animi consequatur ipsum sed neque voluptatem unde corporis, vel eum consectetur amet beatae quia tenetur totam, repellat molestiae dicta?</p>
  <p>Blanditiis, delectus sunt! Possimus obcaecati ullam sit dignissimos perferendis quas officia. Praesentium, ab! Deleniti nemo quos esse doloribus explicabo deserunt, consectetur ex placeat ad necessitatibus non voluptas culpa voluptatibus illo?</p>
  <p>Et magni numquam sint eveniet reprehenderit cumque magnam voluptatibus, aperiam consequuntur natus, deleniti, dolores mollitia nobis assumenda id dolorem incidunt ratione quam explicabo temporibus perspiciatis. Eligendi perferendis eius doloremque at?</p>
  <p>Enim doloribus voluptate, cupiditate earum sint eius distinctio minima sequi ex, reprehenderit quibusdam. Voluptatibus explicabo fuga, quos quidem eveniet quia voluptatem labore ullam harum error itaque quibusdam adipisci, corporis minima.</p>
  <p>Fuga nisi quo saepe magni? Totam asperiores reprehenderit quibusdam repudiandae illum illo nulla tenetur modi, neque, iste quas fugiat in, enim minima atque beatae obcaecati aut adipisci labore itaque sit?</p>
  <p>Doloremque a illo corporis dicta laborum! Perspiciatis qui debitis aliquid soluta doloribus reiciendis nihil. Quis tempore temporibus consequuntur a? Repellendus est quibusdam iste? Est temporibus quo eligendi rem illo natus.</p>
  <p>Et tempora non quam saepe eum nesciunt nam explicabo quibusdam optio rem debitis aliquam vitae suscipit ea dolor ratione a soluta esse inventore, molestias, quasi, deleniti dolorum doloribus minima. Asperiores.</p>
  <p>Repudiandae eligendi provident commodi, atque fugit magni cupiditate voluptatem unde dolorem modi in quaerat, tempore eveniet ex temporibus sit facilis dolores sed aperiam. Molestias modi repudiandae ratione, perspiciatis ducimus nobis.</p>
  <p>Perferendis unde fuga dolorum sequi, architecto culpa repudiandae cum suscipit neque maxime amet officiis nihil similique omnis! Sequi ad officia corporis tenetur autem, dicta nobis a vel fugit? Voluptatibus, necessitatibus!</p>
  <p>Unde veritatis labore possimus facere sapiente veniam! Doloremque velit rerum sit error quidem aut, aperiam rem voluptas laborum amet nemo harum id beatae maiores, iure excepturi aliquam mollitia illum assumenda?</p>
  <h3 id="two">Two</h3>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere, saepe minus? Officia ipsum magnam ducimus harum quod ratione, autem quas aliquam laudantium nam repellendus facere amet nihil enim in pariatur?</p>
  <p>Magni totam autem mollitia natus voluptatem tempore tenetur nobis velit veniam facere beatae quisquam temporibus cum saepe esse assumenda enim, iure porro dicta odit numquam. Ipsam fugiat dicta commodi dolore?</p>
  <p>Placeat quae recusandae aspernatur libero aut! Nam similique quaerat non distinctio neque cum minima voluptates adipisci facere labore dolore ex consectetur tempora architecto tenetur, ut iste quidem quia laborum nesciunt?</p>
  <p>Officiis quidem quia enim ratione? Recusandae cumque magnam officia, distinctio tempore repellendus, quia sunt saepe impedit magni quasi praesentium sed eos expedita. Tempore magni adipisci eos non nesciunt sint minima!</p>
  <p>Fugiat iure voluptatibus et quidem expedita magni quo corporis consectetur quas fuga enim libero esse soluta iste explicabo iusto reiciendis voluptates accusantium eius, repudiandae voluptatem cum nisi repellat veniam. Vel.</p>
  <p>Animi, harum nihil rerum, a asperiores consequuntur eius architecto alias est beatae possimus natus voluptates, ipsam incidunt. Voluptate at necessitatibus ducimus maiores alias, non, quae amet, aperiam aspernatur voluptatibus expedita?</p>
  <p>A dolor iusto sequi repudiandae, in ad quaerat tenetur facere necessitatibus. Quisquam cum quasi quod voluptatem quae, fuga pariatur praesentium maiores consequuntur, delectus explicabo impedit voluptates quas aspernatur, dolorum culpa.</p>
  <p>Sunt modi ex cupiditate minus quasi? Nihil reiciendis odio laboriosam nulla? Laborum fugiat, sapiente commodi aspernatur repellat quisquam, molestiae rem hic facere saepe quo quas iusto voluptatem iure blanditiis ad?</p>
  <p>Asperiores culpa cum corporis. Molestiae accusantium, ad dolore explicabo maxime dolorem officiis delectus repellendus asperiores illum. Quos nam laboriosam quisquam totam hic corporis eveniet enim. Voluptatum hic voluptatibus sint est.</p>
  <p>Sequi, eaque numquam. Est cum amet illum doloribus quidem consequuntur sequi, aliquam enim totam voluptate voluptatum quia animi iusto. Nihil inventore autem molestiae eos nulla dignissimos voluptatem vitae eius voluptate.</p>
  <h3 id="three">Three</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab natus iste facere corporis voluptatem incidunt reiciendis est nobis, deserunt, harum aut facilis explicabo veritatis, itaque deleniti odit perspiciatis cupiditate ullam.</p>
  <p>Distinctio rem, impedit omnis necessitatibus, voluptas et quisquam perspiciatis inventore possimus corporis ratione eos similique voluptate beatae reprehenderit eaque nostrum fugiat, dolore id ex. Odio earum officia laboriosam in assumenda.</p>
  <p>Sint atque unde eveniet totam cumque quo dolorum earum expedita eum? Rerum assumenda aperiam asperiores corrupti illo odio voluptatem, unde quo modi, blanditiis porro minima ut molestias. Voluptate, aliquam vitae!</p>
  <p>Id, debitis ea repudiandae veritatis reprehenderit dignissimos tempore delectus maiores natus nihil libero quam culpa explicabo eveniet, expedita, eos nulla atque odit magnam deserunt iste quasi et! Doloribus, eius rerum.</p>
  <p>Facilis nam sint temporibus saepe dolorum. Eveniet nihil, doloribus molestias fuga fugit provident quas illum! Iste, adipisci distinctio quam neque velit beatae dolores suscipit minus labore voluptatibus, delectus molestias optio.</p>
  <p>Cumque minima natus dignissimos vero ratione quae amet unde beatae. Et eveniet molestias id, fuga quibusdam nam molestiae. Eos temporibus nesciunt nemo commodi error enim provident repellendus maiores accusantium ad.</p>
  <p>Est provident excepturi accusamus dicta sunt nihil eius, alias, possimus perspiciatis blanditiis tenetur mollitia molestias! Est, quo eaque. At dignissimos consequatur dicta asperiores! Nam sequi facere, voluptatibus fuga nemo sapiente?</p>
  <p>Aut consequuntur consequatur explicabo eos itaque? Tenetur, corporis porro consectetur sunt recusandae nisi! Esse ab vitae iste debitis dignissimos illum, cum in enim nulla dolores modi nesciunt ea quaerat fugiat?</p>
  <p>Error porro asperiores et suscipit odit laboriosam commodi, nemo eius laudantium architecto mollitia delectus impedit. Possimus animi, dignissimos cupiditate reiciendis eveniet non, doloribus tempore fuga error hic repellat cumque voluptatem.</p>
  <p>Dolore illum similique nemo autem voluptatem amet placeat, non inventore obcaecati voluptatibus, repellat dignissimos atque harum neque fugiat quaerat eum molestias maiores, repudiandae error ut! Sunt corporis veniam porro alias!</p>
</main>

body {
  padding-top: 5rem; /* height of the header */
}

:target::before {
  content: "";
  display: block;
  position: relative;
  bottom: 0;
  width: 0;
  height: 5rem;
  margin-top: -5rem;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  padding: 1rem;
  background: #1976d2;
}

header a {
  color: inherit;
}

/* defaults and demo */
* {
  box-sizing: border-box;
}

body {
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 75ch;
}