jQueryでページ内リンクを固定ヘッダー分ずらす方法

昨日、「スムーススクロールでページ内リンクをそっこう実装できるjQuery」を紹介しましたが、
固定ヘッダーがあると、その分ずらさなくちゃいけない。。。。すごい手間。
今回はそんな手間をそっこう解決できるjQueryのご紹介です。

基本になるHTMLとCSS

See the Pen
スムーススクロール無し by endebataro (@endebataro)
on CodePen.

これだけだと、ビクッとスクロールして全然スムースじゃあない！

次にヘッダー分ずらしてスルスル～っとスムースにスクロールを行います。
（宇宙人云々かんぬんは、自分が好きで書いております。不快に思われた方には申し訳ないです。）

スムーススクロールの見本

See the Pen
スムーススクロール有り by endebataro (@endebataro)
on CodePen.

【jQuery】

  $(function(){
    $('a[href^="#"]').on("click", function() {
      var speed = 600;
      var header_height = $("header").height();
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top - header_height;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });

解説

「jQuery」を一行ずつ説明していこうと思います。
1行目の「 $(function() 」は「無名関数」と言って、ページが読み込まれたら即実行する関数です。
2行目の「 $(‘a[href^=”#”]’) 」が、「ページ内リンクを含むaタグ」を意味しています。つまり「ページ内リンクをクリックしたら」となります。
3行目は「speed」という変数に「600」を代入しています。この「speed」変数はスクロールスピードに使われるため、スピードと名付けています。スクロールスピードを略して「ss」(Scroll-Speed)でもいいですが、「ss」だとナチスの親衛隊と間違われかねないのでやめときます。
4行目の「 var header_height = $(“header”).height(); 」が今回イチバン大事な行です！こちらも上の行と同じように変数に代入していますが、ヘッダーの高さ（ $(“header”).height() ）を代入しています。こうすることで、後からロゴサイズや余白を増減しても自動で高さを取得してくれるので楽なんです。
5行目は、クリックされたaタグの「href」を取得しています。
6行目は、5行目で取得した「href」がページ内リンクかどうかと、空ではないかを見ています。
7行目では、ページ内リンクが上から何ピクセルあって、そこから4行目で取得したヘッダーの高さを引いています。
8行目で、スクロールアニメーションをしています。「 $(‘body,html’) 」を7行目で取得したピクセル分下に下がり、その時間は3行目で代入した「600ms」で、動きは「’swing’」にしてください！ということになります。
9行目の「 return false; 」の意味は、「処理はここまでっ！」となります。これは、javascriptを見ていると様々な所で出てきますが、jQueryの場合無くても動いてしまいます。jQueryのこうゆう寛大さがスキで他のプラグインやフレームワークが出てきても、結局jQueryに戻ってしまいます。
10行目、11行目は「クリック処理を閉じて」「無名関数を閉じて」終わりです。

まとめ

とても読みづらい文章を長く書いてしまいましたが、リンクをスムースにする「jQuery」さえ記述しておけば、「上へ戻る」もaタグをつけるだけで簡単に実装可能です！
「スムーススクロールの見本」を一番下までスクロールすると「上へ戻る」ボタンが出てきますので押してみてください！

将来、この様な処理を「スラスラ～」っと書ける様になる日まで、この「初めてのブログ」を利用して頂けるととっても嬉しいです！
エンデ・バタローでした。