jQueryを使ってページ内リンクをスルスルッとスクロールさせる

どうもこんにちは。
Web/App/UIデザイナーのサトウです。

今回は、jQueryを使ってページ内リンクをスルスルッとスクロールさせるソースコードをご紹介します。

1ページで構成された小規模のWebサイトやランディングページ（LP）、1ページのコンテンツボリュームが多い場合のナビゲーションなどによく使われる、いわゆるスムーススクロール。
特に1ページ構成のWebサイトが増えている昨今、本当によく使う技術だと思います。
今回はそのJavaScript用ソースコードを解説付きでご紹介します。

画面をスクロールした際にヘッダーやナビゲーションが追従してくるUIを導入している場合とそうでない場合の2通りご紹介しますので、必要に応じて参考にしてみてください。

追従型ヘッダーあり

ソースコード

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

解説

ソースコードについて1行ずつ解説していきます。

var headerHeight = $('#site-header').outerHeight();

スクロールに追従するヘッダーの高さを取得し、headerHeightという名前の変数に代入します。
今回、ヘッダーは site-header という id としていますが、任意の文字列に変更してOKです。

$('a[href^="#"].smooth-scroll').click(function () {

hrefの中身が#で始まり、かつ smooth-scroll という class のついたリンクをクリックしたら処理を開始します。
ここから最終行の

});

までが1つの処理です。

var speed = 500;

スクロールのスピードを設定します。
厳密にはスピードではなく「アニメーション開始から終了までの時間」となります。
上記の例では500ミリ秒を指定しています。

この行はなくても問題ありません。
この行を記述しない場合は、後述するanimateの処理の中にあるspeedの指定も合わせて削除します。
またその場合、speedの値としてはデフォルト値の400が適用されます。

var href = $(this).attr("href");

クリックしたa要素のhrefの中身を取得して代入します。

var target = $(href == "#" || href == "" ? 'html' : href);

スクロールの行き先を指定します。
hrefの中身が#だけまたは空だったらページの先頭を指定し、そうでなければhrefの中身をそのまま指定します。

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

追従ヘッダーの高さ分を差し引いてスクロールの行き先を指定します。
ここで、先ほど作成した変数 headerHeight を使用しています。

$("html, body").animate({

html, bodyをアニメーションさせる処理を開始します。

scrollTop: position

positionで指定した位置にスクロールする指示です。

}, speed, "swing");

スクロールスピードとイージングを指定し、処理を閉じます。

return false;

aタグのデフォルトの挙動（指定したURLに遷移する）をキャンセルします。
この記述をすることで、URLの末尾に指定したid「#hoge」が付与されないようにしています。

追従型ヘッダーなし

ソースコード

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