固定ヘッダーのある場合のアンカー位置ズレ問題

ヘッダーを上部に固定して表示しているときに、アンカーリンクを使うと、固定ヘッダーの高さ分、記事の頭が隠れてしまうため、アンカー位置がズレているように見えます。この問題、単純なようで結構厄介なのです。

有名な方法のひとつは、CSSでターゲットになるボックスにネガティブマージンを設定し、それと同じ数値のパディングを設定する。でもこの方法、ターゲット要素が重なった場合に、リンククリックが出来ない場面があり、あまり良い方法とは言えません。

もうひとつは、JSでアンカーリンクの際にヘッダー高さ分の位置をずらすのですが、同ページ内のリンクではうまく動いても、他のページのアンカーに対しては効かないことがあったり、wordpressでは効かないことが多く、最終的な解決とは言えない感じでした。

そこで探してみたところ、CSSのtarget属性を使った方法がありました。

:target {
    -webkit-animation: targetmodify 0.1s;
    animation: targetmodify 0.1s;
}
@-webkit-keyframes targetmodify{
      0% { padding-top: 180px; margin-top: -180px; }
    100% { padding-top: 0; margin-top: 0; }
}
@keyframes  targetmodify{
      0% { padding-top: 180px; margin-top: -180px; }
    100% { padding-top: 0; margin-top: 0; }
}

この方法なら、ターゲットになったときだけ位置をずらすので、他に影響を与えることもなく、簡単です。スマホとPCで高さは異なると思いますので、それぞれメディアクエリで指定するだけ！

ただし、左右に別のアンカーが並んでいる場合は、ちょっと使えないのですが。

jQueryでうまく解決する方法。アンカーリンクの場合に、固定ヘッダーの高さ分を調整します。

var windowWidth = $(window).width();
var headerHight = 100; 
jQuery('a[href^=#]').click(function() {
    var speed = 1000;
    var href= jQuery(this).attr("href");
    var target = jQuery(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top-headerHight;
    jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
});

ワードプレスでも同じようなことに遭遇します。プラグイン「Easy Smooth Scroll Links」を利用すると、オフセット（ヘッダーの高さ分）を設定してスクロール処理できるので、便利です。プラグインは無駄に入れたくない方には向かない解決方法なのですが・・