ページ内リンクの位置のずれが気になる
グローバルナビゲーションなどのヘッダーを、スクロールの際にページトップに固定するスタイルを適用にしている場合、固定ヘッダー分の高さが画面上に取られているため、ページ内リンクの位置がずれてしまいます。
簡単なJQueryの記述でずれを調整することができます。
ずれをJqueryで解消（カスタマイズ）する方法
jQueryの記述：コピペOK
記述のざっくりとした内容は、「移動位置までの距離からヘッダーの高さを分を引いた距離を移動する」という記述になります。
/* --------------------------------
固定ヘッダー時アンカーリンクの位置を調整
-------------------------------- */
<script>
$(function () {
var headerHight = 100;
$('a[href^="#"]').click(function () {
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? "html" : href);
var position = target.offset().top - headerHight;
$("html, body").animate({ scrollTop: position }, 550, "swing");
return false;
});
});
</script>
jQuery記述の説明
jQueryの記述を１行ずつ確認してみましょう。
<script>
$(function () {
var headerHight = 100; //ヘッダーの高さを指定しheaderHightに代入
$('a[href^="#"]').click(function () { //アンカーリンクをクリックでイベント処理
var href = $(this).attr("href"); //アンカーリンクの属性を取得
var target = $(href == "#" || href == "" ? "html" : href); //hrefの値が"#"または""だった場合"html"が、それ以外の場合はhrefをtargetに代入
var position = target.offset().top - headerHight; //画面上部からターゲット要素までの距離 - ヘッダー高さをpositionに代入
$("html, body").animate({ scrollTop: position }, 500, "swing"); // 取得したpositionの位置まで0.5秒でゆっくり移動
return false; //clickイベント実行後にaタグのhrefリンクを打ち消す
});
});
</script>jQueryエラーが出た場合の解消法
以下のようなエラーが出る場合があります。
// コンソールエラー記載
Uncaught Error: Syntax error, unrecognized expression: a[href^=#]JQueryのバージョンと記述方法があっていない場合にでるエラーです。
上記エラーが出た場合は、aリンクのhref属性の記述修正「aリンクのhref属性をダブルクォーテーションまたはシングルクォーテーションで囲む」でエラー解除できます。
// エラーが出る記述
$("a[href^=#]").click(function () // a[href^=#]の#がクォーテーションで囲まれていない
// エラー解除の記述
$("a[href^='#']").click(function () { //a[href^=#]の#をシングル（またはダブル）クォーテーションで囲むchromeデベロッパーツールで変数の値を確認する
jQueryやJavaScript実行時の変数の状態を確認すると、プログラムの記載内容の理解を深めることができます。
こちらの記事も参考にしてみてください。
