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;
});
});









