2020年05月13日

外部リンクからスムーススクロール(ページ内リンク)を実行する方法

外部サイトから遷移した際にページ内リンクを実行する方法

お世話になっております。SeekNextの佐藤です。
今回は外部リンクからの遷移してきた際にページ内リンク(スムーススクロール)を実行する方法を書いていきます。

スムーススクロールとは

まずスムーススクロールとは以下のような感じです。

このページ内リンクですが、外部サイトからリンクしてくるとうまくいきません。また、ブラウザによってはスムーススクロールが効かないこともあります。

CSS等の調整ではブラウザ毎の障害があるので、JavaScriptを使用して解決していきましょう!

外部リンクからスムーススクロール(ページ内リンク)を実行する方法

スムーススクロールの処理(#から始まるリンクをクリックした際に実行)

// 通常のページ内リンク(スムーススクロール)
$('a[href^="#"]').click(function() {
    let href= $(this).attr("href");
    let target = $(href);
    let position = target.offset().top - headerHeight;
    $('body,html').stop().animate({scrollTop:position}, 500);   
});

外部リンクからのスムーススクロール

// ヘッダーの高さを取得(fixedにしている時などに有効)
let headerHeight = $('.pageHeader').outerHeight();
// ページ内リンク
let urlHash = location.hash;

// URLにページ内リンクがあるかどうか
if (urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        let target = $(urlHash);
        let position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, 500);
    }, 100);
}

いかがでしょうか?単純に読み込んだ後にsetTimeoutを使用しているだけです。つまりコールバックしているということですね!

コードの中身を見れば簡単に理解できると思いますので、ぜひ参考にしてみてください!