jQuery：ヘッダ固定・レスポンシブを考慮したアンカーリンクをスムーススクロールさせる方法

こんにちは、タクゾウです。
仕事で使える、ヘッダ固定・レプポンシブに対応したアンカーリンクをスムーススクロール方法を紹介したいと思います。

アンカーリンクをスムーススクロールさせるコード
使用方法
コード説明
- リサイズ対応させる処理
- アンカーリンクをスムーススクロースさせる処理

アンカーリンクをスムーススクロールさせるコード

わかりやすいようにコメント多めで書いています。

JavaScript

/*
* 「#」リンクをスムーススクロール指定
* @param {number} スクロールにかかる時間
* @param {string} 固定しているheaderのidかclass名(引数に入れない場合は0になります。)
* @return none
*/
function smoothScroll(smoothSpeed, fixedElem){
  var headerHeight;
  if(arguments.length === 1){
    headerHeight = 0;//header固定がない場合
  }else if(arguments.length === 2){
    headerHeight = $(fixedElem).height();//headerの高さを設定
    //リサイズ操作が終わったタイミングで処理
    var timer = false;
    $(window).resize(function() {
        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
          headerHeight = $(fixedElem).height();//リサイズ後のheaderの高さを設定
        }, 200);
    });
  }else{
    throw new Error('引数が不正です');
  }
  //リンク#をクリック時に実装
  $('a[href^="#"]').click(function(){
    var speed = smoothSpeed;//スムーススクロールにかかる時間を設定
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position - headerHeight}, speed, "swing");
    return false;
  });
}

//DOMがよみこまれた段階で実装
$(function(){
  smoothScroll(500, "#sample");
});

使用方法

使用方法は、簡単です。
smoothScroll()で関数をよびだし、引数に必要な数値を入力するだけです。

第1引数：smoothSpeed

スムーススクロールにかかる時間です。500くらいがベストです。(例：500)

第2引数：fixedElem

ヘッダを固定している場合は、アンカーリンクがずれるので第2引数に固定しているヘッダ要素の「id」 or 「class」名を指定してください。(例：”#sample”)
リサイズ時にも対応しているので、レスポンシブサイトでも問題なく動きます。

MEMO

固定ヘッダがない場合は第２引数をしていしないでください。

コード説明

リサイズ対応させる処理

PCとSP(スマートフォン)でヘッダの高さが変わることがほとんどなので、
リサイズ処理によって、「headerHeight」を変更する処理をしています。

JavaScript

//リサイズ操作が終わったタイミングで処理
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
      headerHeight = $(fixedElem).height();//リサイズ後のheaderの高さを設定
    }, 200);
});

MEMO

リサイズ処理は、PCの負担を考えて、リサイズ操作が終わった時に処理が走る実装にしています。

アンカーリンクをスムーススクロースさせる処理

「speed」変数にスムーススクロールにかかる時間を設定してあげ、
hrefに「#」が指定してあるリンクをクリックした場合に、アンカーリンク先の要素にanimateで移動させる処理をしています。

JavaScript

$('a[href^="#"]').click(function(){
  var speed = smoothSpeed;//スムーススクロールにかかる時間を設定
  var href= $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $("html, body").animate({scrollTop:position - headerHeight}, speed, "swing");
  return false;
});

Web制作を勉強している人の参考になれば幸いです。