ページ内リンクをページ外からでもスムーズにスクロールさせる

当サイトの目次でもやってますが、縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。

ですが、特定のページを別ページにしている場合、ページの外からページ内リンクをクリックした際もスムーズにスクロールさせたいものです。

ですので今回は、ページ内リンクをページ外からクリックした際のスムーズスクロールをやっていきます。

Contents

まずはページ内リンクをスムーズスクロールさせる
- HTML
- JS
スムーズスクロールじゃないページ外からのページ内リンク
スムーズスクロールのページ外からのページ内リンク
- JS
まとめ

まずはページ内リンクをスムーズスクロールさせる

まずはおさらいです。ページ内リンクをスムーズスクロールさせます。

HTML

<nav class="gnav">
    <ul class="gnav__menu">
        <li class="gnav__menu__item"><a href="#about">About</a></li>
        <li class="gnav__menu__item"><a href="#works">Works</a></li>
        <li class="gnav__menu__item"><a href="#recruit">Recruit</a></li>
        <li class="gnav__menu__item"><a href="#news">News</a></li>
        <li class="gnav__menu__item"><a href="">Contact</a></li>
    </ul>
</nav>

HTMLは全部載せると長くなるので、ナビゲーションのみ載せます。いたって普通のページ内リンクです。

JS

var headerHeight = $('.site-header').outerHeight();
$('a[href^="#"]').click(function() {
    var href= $(this).attr("href");
    var target = $(href);
    var position = target.offset().top - headerHeight;
    $('body,html').stop().animate({scrollTop:position}, 500);   
    return false;
});

1行目

今回はヘッダーを固定してますので、ヘッダーの高さを取得して、スクロールする際にヘッダーの高さ分をマイナスします。

2行目

「a[href^=”#”]’)」で#から始まるリンク要素をクリックした際の処理を記述します。

5行目

前述のとおり、スクロール先の高さからヘッダーの高さをマイナスします。

スムーズスクロールじゃないページ外からのページ内リンク

別ページでお問い合わせページを追加しました。グローバルメニューをクリックしてみてください。

ページ外からのページ内リンクなので、スムーズスクロールではなくダイレクトにその位置へスクロールしまいます。ヘッダーの高さ分マイナスもされなくなってしまいました。

スムーズスクロールのページ外からのページ内リンク

では本題をやっていきます。

JS

var headerHeight = $('.site-header').outerHeight();
var urlHash = location.hash;
if(urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
        var target = $(urlHash);
        var position = target.offset().top - headerHeight;
        $('body,html').stop().animate({scrollTop:position}, 500);
    }, 100);
}
$('a[href^="#"]').click(function() {
    var href= $(this).attr("href");
    var target = $(href);
    var position = target.offset().top - headerHeight;
    $('body,html').stop().animate({scrollTop:position}, 500);   
});

11行目以降のリンクをクリックした際の処理はサンプル1と同じです。