前準備
jQueryをダウンロードしておき、HTMLのhead要素内で読み込んでおきます。
コード
jQueryの読み込みの後に次のJavaScriptを書きます。
$(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を指定します。