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

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

まず、HTMLにページ内の指定した場所まで移動するボタンとなるaタグを書きます。

そしてaタグのhref属性に移動先のid属性値を、class属性にsmooth-scrollを指定します。

その後、以下のJavaScriptをheadタグの中に書きます（要jQuery）。

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

このコードの.smooth-scrollの部分はページ移動ボタンとなるaタグのclass属性を指定しています。

必要な場合はaタグのclass属性と合わせて適当なクラス名に変更して下さい。

また、スクロール時間を変える事もでき、数字で500と書いている部分を変更して下さい（単位はミリ秒）。