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

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

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です