<header class="header">
  ヘッダー位置が固定されている場合のページ内リンク
</header>

<main>
  <ul>
    <li>
      <a href="#section-a">
        ページ内リンクA
      </a>   
    </li> 
    <li>
      <a href="#section-b">
        ページ内リンクB
      </a>   
    </li> 
  </ul>
  <section id="section-a" class="section-a page-link-position">
    セクションA
  </section>
  <section id="section-b" class="section-b page-link-position">
    セクションB
  </section>
</main>
:root {
  --header-height: 100px;
}
body {
  margin:0;
}

.header {
  width: 100%;
  position: fixed;
  min-height: var(--header-height);
  background: #999;
}

main {
  padding-top: var(--header-height);
}

.section-a,
.section-b {
  min-height: 2000px;
}

.section-a {
  background: #EFEFEF;
}

.page-link-position {
  padding-top: var(--header-height);
  margin-top: calc(var(--header-height) * -1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.