スマホ時のみ、動的にURLにハッシュ追加し、ナビゲーション部を最上部に配置（長いヘッダー部をスキップしてナビ以下を表示）する方法

趣旨

レスポンシブサイトで（PCサイトと構造を共通にする関係で）、ヘッダー部にロゴやらテキストやらバナーやらを配置する必要があり、スマホ時のファーストビューの大部分をヘッダー部が占拠してしまい、コンテンツまでが遠くなってしまうことは多々あります。

その場合、グローバルナビゲーション部分にアンカー（<div id="gnavi"等）を作っておいて、ページ遷移時にそのアンカーにリンク（<a href="/page/#gnavi"等）し、グローバルナビゲーションが画面の最上部に表示されるようにする（ヘッダー部分は上部にスクロールすれば見える）のもひとつの方法です。

しかしスマホサイトのみでの仕組みのため、ソースコードはいじりたくありません。

そんなときに、JavaScriptで画面の幅を判定し、スマホ時のみリンクアドレスに動的にアンカー名を追加してしまう方法を記載します。

方法

方法は簡単で、以下のコードでOKなはずです。

$(document).ready(function () {

    if ($(window).width() < 768) {

        $('a').click(function(e) {

            if ($(this).attr('href') && !$(this).hasClass("in-page-link")) {

                $(this).attr('href', $(this).attr('href') + "#gnavi");

            }

        });

    }

});

解説

特に難しいところはないと思いますが、注意点としては、上記を実装すると、ブラウザの幅が　768px未満のときは、全てのリンクにアンカー名（ハッシュ、#gnavi）が追加されてしまいますので、追加されたくないリンクはif文で除外するようにしています。（上記の例では.in-page-linkというクラスをもつ aタグは動作対象外としています。）



以上です。