ズラして実装スムーススクロール

はじめに

スルスルスル～と気持ちよーく移動してくれるスムーススクロールの実装の方法は、すでにこちら（スムーススクロールの実装）でご紹介いたしました。
今回は、それを応用して、グローバルメニューを固定にした場合など、スクロールがズレてしまう時の対処法をご紹介します！

コード解説

とは言っても、前回のスムーススクロールを実装できたらとっても簡単です。
取り合えず、以下の完成例を確認してみましょう。

See the Pen smooth scroll02 by denet-tech (@denet-tech) on CodePen.

menu1、menu2、menu3 をクリックするとそれぞれヘッダーの高さ分だけずれて、ピッタリ指定箇所で止まります。
jQueryのコードは以下の通りです。

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

まずはヘッダーの高さを調べなくてはなりません。
そのコードが以下になります。

var adjust = $( 'header' ).outerHeight();

outerHeight() は要素の高さを取得できます。
ヘッダーの高さをここで取得し、変数adjustに格納しています。
あとはこの取得したヘッダー高さを移動距離から引いてあげます。
そのコードが以下となります。

var position = target.offset().top - adjust;

offset() は画面上に配置した要素の左上を起点とした位置を取得できるメソッドです。
offset().top はY座標、上からの距離を取得します。
そこからヘッダー高さのadjustを引いて、移動距離を調整します。

以上でスムーススクロールの位置の調整は完了です。