[js]ハッシュタグ付きページ遷移の固定ヘッダー対策

ヘッダーを固定してた場合、通常だと被ってしまうアレ。

意義
結論（jQuery）
参考

意義

端的な話で、URLにハッシュタグが付いていて該当の要素があれば、遷移した際にその位置がブラウザ上端に合わせて表示される。普通なら便利だねで済むのだけど、ヘッダーを固定していたら被ってしまって面倒くさい。大体こういうときは見出しにidを付けてるもんで、ちゃんとその位置に来てるのに肝心なものが隠れちゃってますね、ということになる。ページ内リンクのスムーススクロールだとその辺を対策してることは多い印象だけど、外部リンクに関しては優しさに欠けてるような。

どうにかしようという内容。

結論（jQuery）

jquery3.6.3で動作確認済み。

    $(window).on('load',function(){
        const hash = location.hash;
        if(hash){
            setTimeout(function(){
                var headerHeight = $('header').innerHeight();
                var target = $(hash == "#" || hash == "" ? 'html' : hash);
                var position = target.offset().top - headerHeight;
                $("html, body").scrollTop(position);
            });
        }
    })

解説しようにもそのまんまというか。ページトップから該当位置までの距離からheaderの高さを引いて、その位置に移動させる。

最後の.scrollTop()を.animate()にすればスムーススクロールになる。

    $(window).on('load',function(){
        const hash = location.hash;
        if(hash){
            setTimeout(function(){
                headerHeight = $('header').innerHeight();
                var target = $(hash == "#" || hash == "" ? 'html' : hash);
                var position = target.offset().top - headerHeight;
                $("html, body").animate({scrollTop:position}, 500);
            });
        }
    })

ページが長い場合、アニメーションがまだるっこしいということもある。その辺は好みで。

参考

【jQuery】ページ遷移後にスムーススクロールする | Recooord | Web制作で扱うコーディングスニペットを紹介

別ページのアンカーリンクをクリックした際に、特定の要素にパッと遷移するのではなく、別ページのページ上部から特定の要素まで、スムーススクロールする方法について紹介

文句をつけるわけじゃないけど、外部から飛んできたときは良いんだけどページを再読込した際の処理がうまくなかった。