ページ内リンク（アンカーリンク）で特定の場所までスムーススクロールさせる

jQueryでスムーススクロールを実装します。
スムーススクロールとはページ内リンク（アンカーリンク）までの距離をアニメーションして移動する実装になります。
ホームページ制作では必ず使用する場面がありますので覚えておきましょう。

サンプルをみる

スムーススクロールとはどんなものなのか。まずは上記のサンプルを確認してみましょう。
上部のリンクをクリックすると、指定したリンク先までスクロールしていきます。

スムーススクロールのJavaScript

$(function(){
  $('a[href^="#"]').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;
  });
});

これが一般的に使われるスムーススクロールのコードになります。
#で始まるリンクをクリックするとスムーススクロールします。

追従するヘッダーがある場合

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    //ヘッダーの高さを取得
    var header = $('header').height();
    //ヘッダーの高さを引く
    var position = target.offset().top - header;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

追従するヘッダーがある場合は、スクロール先のコンテンツが隠れてしまう可能性があります。
その場合はヘッダーの高さ分スクロール距離を引いてあげます。