スキップしてメイン コンテンツに移動

投稿

4月, 2015の投稿を表示しています

スマホ時のみ、動的に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タグは動作対象外としています。)



以上です。