ヘッダーにfixed使用時のCSSでのアンカーリンク位置調整方法

ヘッダーにfixed使用時のCSSでのアンカーリンク位置調整方法

ヘッダーにfixedが指定されていると重なる

ヘッダーにfixedが指定されているとアンカーリンクをクリックした際に移動先がヘッダーの下に表示されてしまう。

サンプル1

こうなるのを防ぐにはアンカーリンクの飛び先のidの箇所にmargin-top(ネガティブマージン)とpadding-topを追加すれば良い。

CSSでのアンカーリンク位置調整方法

例えばアンカーリンクがhref="#link1"のようになっている場合は遷移先のidにヘッダーの高さと同じmargin-top(ネガティブマージン)とpadding-topを追加する。

<h1 id="link1" class="anchor">link1</h1>
.anchor {
  margin-top: -50px;
  padding-top: 50px;
}

遷移先のidにmargin-topやpadding-topが指定されている場合はそのままCSSを追加すると上書きしてしまうため、遷移したい場所のタグの上に空のaタグを配置してidとmargin-top(ネガティブマージン)とpadding-topを同じように追加する。

<header>header</header>
<ul>
  <li><a href="#link">link</a></li>
  <li><a href="#link1">link1</a></li>
</ul>

<a id="link" class="anchor"></a>
<h1 id="link1" class="anchor">link1</h1>
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;
}
.anchor {
  margin-top: -50px;
  padding-top: 50px;
}

サンプル2

カテゴリーcss