【Web制作】 スムーズスクロール機能を実装する

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

スムーズスクロールのJavaScript

jQueryを使うので、予めダウンロードしておき、利用できる状態にして下さい。

その後、次のJavaScriptをHTMLのheadタグの中に書きます。

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

スクロールの時間を変える場合は数字で500と書いている部分を変更します。（単位はミリ秒）

アンカー（a）タグにスムーズスクロールの機能を与える

アンカー（a）タグにスムーズスクロールの機能を与えるため、class属性にsmooth-scrollを指定します。