サイトにスムーズスクロール機能をつける

ページ内の指定した場所まで滑らかにスクロールするスムーズスクロール機能をつける方法について。

移動先を作る

まず、移動先となる箇所のタグにid属性を指定します。例は次の通りです。

<div id="target-content">移動先のコンテンツ</div>

スクロール開始ボタンを作る

次に、クリックした時に移動先までスクロールが始まるボタンを作ります。ボタンを表示したい箇所に次のタグを書きます。

<a href="#target-content" class="smooth-scroll">スクロール開始ボタン</a>

href属性は1文字目に半角のシャープ、2文字目以降に移動先のid属性の値を書きます。

class属性のsmooth-scrollは好みの名前に変更しても大丈夫です。

スクロールのJavaScriptを書く

最後に、headタグの中に次のJavaScriptを書きます（要jQuery）。

<script type="text/javascript">
$(function() {
    $(".smooth-scroll").click(function() {
        var targetY = $($(this).attr("href")).offset().top;
        $("html,body").animate({scrollTop: targetY}, 500, "swing");
        return false;
    });
});
</script>

コードの.smooth-scrollの部分はスクロール開始ボタンのclass属性を書きます（先頭のドットを忘れずに）。

また、スクロール時間を変える事もできます。方法は数字で500と書いている部分を適当な値に変えます（単位はミリ秒）。