【アコーディオンメニュー】開いたアコーディオンメニューの先頭へスクロールして移動

アコーディオンメニューを開いた時に、アコーディオンメニューの先頭へスクロールして移動します。閉じた時はスクロールしません。

タイトル1

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

タイトル2

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

タイトル3

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

html、CSSのコードは下記の記事と同様です。
開くボタン・閉じるボタンを1つの画像で使いまわす仕様です。

最後にjQueryのコードです。
まず、クリックしたタイトルのpタグにdataを利用してdata-clicks属性を付与します。なお、Developer Toolsで見てもソース上カスタムデータ属性は反映されません。そして、この時点ではdata-clicks属性に値を設定していないため、console logで見ると変数clicksの値はundefinedです。
次にタイトルのpタグにクラス名selectedを付与し、クラス名toggle_txtのpタグをslideToggleします。この動作は上記の記事と同様です。
次にifで変数clicksの中身を調べますが、undefinedのためelseの処理になります。クリックしたタイトルのpタグのY座標を調べスクロールで移動します。
最後にdata-clicks属性に「!clicks」の値を設定します。つまりundefinedではない値、trueを設定します。
再度タイトルをクリックしてアコーディオンメニューを閉じる時の動作時は、変数clicksにtrueが設定されているためスクロールの動作が発生しません。今度は変数clicksにfalseを代入し、アコーディオンメニューが開く時の動作に備えます。

$(function(){
	$('.toggle_title').click(function(){
		var clicks = $(this).data('clicks');
		$(this).toggleClass('selected');
		$(this).next().slideToggle();
		if (clicks) {
		} else {
			var top = $(this).offset().top;
			$('html,body').animate({scrollTop:top},500);
		}
		$(this).data("clicks", !clicks);
	});
});
タイトルとURLをコピーしました