header

link1

sample

link2

sample

link3

sample

<header>header</header>
<ul>
  <li><a href="#link">link</a></li>
  <li><a href="#link1">link1</a></li>
  <li><a href="#link2">link2</a></li>
  <li><a href="#link3">link3</a></li>
</ul>
<a id="link" class="anc"></a>
<h1 id="link1" class="anchor">link1</h1>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<h1 id="link2" class="anchor">link2</h1>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<h1 id="link3" class="anchor">link3</h1>
<p>sample</p>
<p>sample</p>
<p>sample</p>

body {
  margin: 0;
  padding: 60px 0 0 0;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #eee;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
  text-align: center;
  opacity: 0.8;
}
p {
  margin-bottom: 100px;
}
.anchor {
  margin-top: -50px;
  padding-top: 50px;
}