固定トップメニューでアンカー位置を揃える

position: fixed で固定ヘッダを置くデザインは未だによく使われるけれど、これをやるとハッシュアンカーでページのスクロールトップが固定ヘッダの裏側に行ってしまい、位置がズレる。

これをあまり難しくならずに解決するのに、 a タグへスタイルを当てると楽だった。

/* 固定ヘッダの高さが3remの場合 */
a[name] {
  display: block;
  padding-top: 3rem;
  margin-top: -3rem;
}

bulma などCSSフレームワークで a にカーソル設定してあることがあり、そうなるとこの高さの出来たアンカーでもカーソルが pointer になってしまったりするので、一応打ち消しておくと安心。

a[name] {
  cursor: auto;
}

ブラウザ次第で上手く動かなくなる可能性もあるかもだけど、今のところそういう話は聞いてません。