jqueryを使ってclass付与と同時にアンカー要素にスムーススクロールを実装します。
最初、class付与の処理にreturn false;を書いていたので、処理が通らずスムーススクロールが実行されませんでした。
こういったイベントのバブリング(伝播)について簡単にまとめると、
・クリックなどのイベントは、子要素から親要素へと伝播される(バブリング)
・preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。
・return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルする。
引用元:http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html
$(function(){ $('#sample li a').click(function() { // アンカーの値取得 var id = $(this).attr("href"); if($('#sample1').hasClass('on') == false && $('#sample2).hasClass('on') == false && $('#sample3').hasClass('on') == false){ $(id).addClass('on'); } else{ $('#about section').removeClass('on'); $(id).addClass('on'); } //return false; 後の処理が通らなくなるので不要 }); // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });