ページ内リンクをページ外からでもスムーズにスクロール
縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。
ですが、特定のページを別ページにしている場合、ページの外からページ内リンクをクリックした際もスムーズにスクロールさせたいものです。
ですので今回は、ページ内リンクをページ外からクリックした際のスムーズスクロールをやっていきます。
まずはページ内リンクをスムーズスクロールさせる
|
1 2 3 4 5 6 7 8 9 |
<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は全部載せると長くなるので、ナビゲーションのみ載せます。いたって普通のページ内リンクです。
|
1 2 3 4 5 6 7 8 |
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行目
前述のとおり、スクロール先の高さからヘッダーの高さをマイナスします。
スムーズスクロールじゃないページ外からのページ内リンク
別ページでお問い合わせページを追加しました。グローバルメニューをクリックしてみてください。
ページ外からのページ内リンクなので、スムーズスクロールではなくダイレクトにその位置へスクロールしまいます。ヘッダーの高さ分マイナスもされなくなってしまいました。
スムーズスクロールのページ外からのページ内リンク
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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と同じです。
2行目
ページ外からリンクしてきた際、URLのハッシュを取得します。
4行目
URLにハッシュがある場合＝ページ外からのページ内リンクの場合はダイレクトにその位置へスクロールしてしまうので、一旦スクロールをトップに戻します。
5行目
そして、トップから改めてスクロールさせますが、この際、ページロードの処理を待ってからでないと正常にスクロールできませんので、100ミリ秒後にスクロールさせます。
まとめ
よくページ内リンクをハッシュではなく「?=○○」としているサンプルを見ますが、トリッキーなやり方に思えてしまうので、通常どおりページ内リンクは「#○○」でやりました。
サンプルのようにランディングページでお問い合わせフォームだけ別ページにしている場合に役立ちますので、やってみてください。
