JS:class付与とスムーススクロール

2017.04.07

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