別ページのアンカーリンクへスムーズスクロールで移動しつつ、fixedナビの高さ分を自動でマイナスもするjQueryコード

2019.6.7

個人的にはホームページは、シンプルな挙動が一番効率的だと思うのですが、ナビを固定したり、固定した分見出しがかぶってしまうため、その分マイナスした位置にアンカーで移動したいとか、逆に複雑にしているような要望が多いです。

まぁ仕事なので、こういった挙動も作るのですが、今回はその挙動の制作に手間取ったため、動くコードを貼り付けておきます。

コード

var headerHeight = $('.header').outerHeight();     //fixedのヘッダーの高さを取得
var urlHash = location.hash;    //URLハッシュを取得
var animeSpeed = 500;   //スクロールのアニメーションスピード
if(urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        var target = $(urlHash);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);
    }, 100);
}
$('a[href^="#"]').on({
    'click': function(){
        var href= $(this).attr("href");
        var target = $(href);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, animeSpeed);   
    }
});

おわりに

すでにいるページの別アンカーへ飛ばす時のスムーススクロールは簡単ですが、別ページとなると、ここまで複雑になるのですね。