[jQuery]スムーススクロールとアンカーリンク

絶対パスでリンクしてるよ！

例えば、ヘッダーメニューを固定追従(fixed)しているサイトのリンクに、
http://example.com/hoge/#Sec
というように、リンク先をアンカーリンクで指定している場合、固定ヘッダー分の高さを引いてあげないとタイトルが途中で切れて見えたりして見栄えがかなり悪くなります。

JSやjQueryを使ってページを読み込んだ後に位置を調整してあげればいいのですが、
EdgeとIEだけどうにも不安定だったのでメモ。

ちなみにかなり力技でねじ伏せてるので、もっといいやり方があるような気がします。

// ページ読み込み後に発動
$(window).on('load', function() {
    // アンカーリンクの場合
    if (location.hash === '#Sec') {
        // スマホとPCでヘッダーの高さが違う場合
        // top_num　= $('header').innerHeigh(); とかでもいいと思う
        let top_num = window.innerWidth > 767 ? 34 : 60;
        let targetY = $('#Sec').offset().top - top_num;
        // 読み込み後100ミリ秒後にscrollTopを発動
        setTimeout(function() {
            $('html, body').scrollTop(targetY);
        }, 100);
    }
    return false;
});

setTimeoutで読み込み後の位置指定の発動をずらしているだけです。
一応これで上手くいくので、恐らくデフォルトでアンカーリンクの要素に行くタイミングがブラウザによって違うのかな。と予想。
ページ読み込み直後にアンカーリンクの要素に行くとか。（調べてないので憶測ですが…）

一旦はこれで解決ということで。

絶対パスでページ内リンクしてるよ！

先ほどと似たような感じですが、絶対パスのリンク先が現在のページであった場合、よくあるスムーススクロールの書き方は発動しません。

Ex)よくある書き方

$(document).on('click', 'a[href^="#"]', function() {
    let time = 400;
    let target = $(this.hash);
    if (!target.length) return;
    let targetY = target.offset().top;
    $('html,body').animate({scrollTop: targetY}, time, 'swing');
    return false;
});

これを発動させるためには、onイベントの第二引数のSelecterを一箇所変更します。

Ex)発動する書き方

$(document).on('click', 'a[href*="#"]', function() {
    let time = 400;
    let target = $(this.hash);
    if (!target.length) return;

    let targetY = target.offset().top;
    $('html,body').animate({scrollTop: targetY}, time, 'swing');
    return false;
});

これで、ぬるっとスクロールしてくれると思います！