[jQuery]外部アンカーリンクからヘッダー固定時の調整

やるよ

用途
cssだけでもやれる
jQueryでやる
ちなみに

用途

ヘッダーをposition:fixedとかで固定したデザインで組んだ場合、アンカーリンク（#が付いてるやつ）で外部から遷移してくると、idのついた要素がヘッダーに隠れてしまう。格好悪くて嫌なときの対処法。

cssだけでもやれる

本筋にいく前に。

headerを100pxで作ったとして、こうすればcssだけで対策できる。

<header></header>
<h1 id="anchor">アンカー</h1>

header{
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
}
h1#anchor{
    margin-top: -100px;
    padding-top: 100px;
}

paddingでheader分の余白を作って、でも見た目として手前の要素とすっごい隙間が空くとダサいからmarginでマイナス値を振って相殺。悪くはないんだけど、デザイン調整が入ったときになんだこれってなるので実用的とはいえない。

jQueryでやる

ライブラリは3系で動作確認済み。

    $(window).on('load', function() {
        url = $(location).attr('href');
        headerHeigth = $('header').innerHeight();
        if(url.indexOf("#") != -1){
            anchor = url.split("#");
            target = $('#' + anchor[anchor.length - 1]);
            if(target.length){
                position = Math.floor(target.offset().top) - headerHeigth;
                $("html, body").animate({scrollTop:position}, 500);
            }
        }
    });

たまに実数を入れてる記事を見るけど、PC/SPでheaderの高さを変える場合も対応できるんでheaderの高さはjsで取得しちゃったほうがいいと思う（headerHeight）。勝手に思ってるだけなんで、実数の方がいい理由があるのかもしれないのであんまり強くは言えない。

ちなみに

当然だけどURLはアンカーリンク込みになる。スムーススクロールみたいにURLを汚さないのが好きな人には残念だけど、これは仕様なんだ。悔しいだろうが仕方ないんだ。