POPSブログ

jQuery ページ先頭にスクロールするアコーディオン

363

  Category:  jquery2015/08/10 pops 

DIV構成の記事用途のアコーディオンです。アコーディオンが開閉した場合にコンテンツがページ先頭位置(TOP)にスクロールしますのでスマートホンサイトには多少有効と思います。

 

jQuery スクロールするアコーディオン デモ


当方、スマートホンサイト用途のものは作っていませんが、多少需要があるようなので、スクロールする「DIV構成の記事用途のアコーディオン」に改造してみました。
記事の長さにもよりますが、順番に下に閲覧するには便利かも知れません。

 

DEMO jQuery スクロールするアコーディオン


● デモページは [ jqury-1.9 ] で動作しています。どのようなものかはデモを参照ください。


1 先に指定要素を開いてから、閉じるタイプ。先頭位置にスクロール

DEMO-023


2 先に閉じてから、指定要素を開くタイプ。先頭位置にスクロール

DEMO-023b


3 同時に開閉するタイプ。先頭位置にスクロール

DEMO-023c


4 個別に開閉するタイプ。先頭位置にスクロール

DEMO-023d


Chrome Opera Firefox IE9-11で動作確認済み。 Safari(Mac)、Edgeは未確認です。

 

簡単な説明


開閉の様式により4種類が有りますが、どれも同じようなものです。(デモを参照)


1. 先に指定要素を開いてから、閉じるタイプ。
2. 先に閉じてから、指定要素を開くタイプ。
3. 同時に開閉するタイプ。
4. 個別に開閉するタイプ、の4種類が有ります。
5. タイトル「クリック」で開閉しますが、全て先頭位置にスクロールします。
6. アンカー指定でスクロールするJSと組み合わせてみました。(削除可能)
7. 決まったHTML構造でなければ動作しませんので注意ください。
8. DIV要素の中は自由に構成出来ます。


HTML JS CSS


HTML

● 4種類とも同じ構造になります。「クリック」する「H要素」の直下に「DIV要素」が無ければなりません。

「デモ」では「H3要素」で作っていますが、変更は可能です。注意、その場合はJSも修正が必要です。



<div id="accordion-41x" class="accordion-box">
	<h3>コンテンツタイトル1</h3>
	<div class="accordion-block">
	コンテンツ
	</div>
	<br />
	<h3>コンテンツタイトル2</h3>
	<div class="accordion-block">
	コンテンツ
	</div>
	<br />
	<h3>コンテンツタイトル3</h3>
	<div class="accordion-block">
	コンテンツ
	</div>
	.
	.
	.
</div>
---------------------------------------------------

<br />があった方が見易い

● アンカー指定でスクロールするJSと組み合わせた場合です。ページ記事の閲覧には「手動スクロール」動作が軽減されますので大変有効です。デモではこの形式で表示しています。
下記は1例ですので、構成などはコンテンツ、ページ構成にあわせて自由です。



<h3 id="contents-top">jQuery Scroll-Accordion DEMO1</h3>
<br />
<div id="accordion-41x" class="accordion-box">
	<h3>コンテンツタイトル1</h3>
	<div class="accordion-block">
	コンテンツ
	</div>
	<br />
	<h3>コンテンツタイトル2</h3>
	<div class="accordion-block">
	コンテンツ
	</div>
	<br />
	<h3>コンテンツタイトル3</h3>
	<div class="accordion-block">
	コンテンツ
	</div>
	<br />
<p class="align-right">▲[ <a href="#contents-top">CONTENTS-TOP</a> ]</p>
</div>

JS

JSは下記の様になります。「クリック」する「タイトル」部分は「H3」を利用していますが、書き換え自由です。
勿論、クラス名であっても構いません。


アコーディオンactive要素を指定して開く

初期時、アコーディオンactive要素を指定して開く事が出来ます。
閉じて使用する場合は // を入れて機能しないようにして下さい。
デモでは最初の「DIV要素」、番号は 0番 を開いています。



//active要素を指定して開く
accordionItem.find('h3').eq(no).addClass('active').next('div').show(100,function(){

	//指定要素位置にスクロール
	scroll_top(accordionItem.find('h3').eq(no));

});
-------------------------------------------------------
機能しない

//active要素を指定して開く
//accordionItem.find('h3').eq(no).addClass('active').next('div').show(100,function(){

	//指定要素位置にスクロール
	//scroll_top(accordionItem.find('h3').eq(no));

//});

● scroll-accordion01.js、JS名は任意に変更可。注意、41x用です。

1. 先に指定要素を開いてから、閉じるタイプ。



//scroll-accordion01.js
//日本語
//Scroll-Accordion

//Scroll-accordion-41x
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//active要素を指定して開く
		var no=0;
		var keep_Item;

		//----------------------------------
		var accordionItem=$('#accordion-41x');//Item

		//MENUブロック一旦非表示
		accordionItem.find('.accordion-block').hide();

		//active要素を指定して開く
		accordionItem.find('h3').eq(no).addClass('active').next('div').show(100,function(){

			//指定要素位置にスクロール
			scroll_top(accordionItem.find('h3').eq(no));

		});

		//click-action
		accordionItem.find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			keep_Item=$(this);
			
			//hit分岐処理
			if ($(this).hasClass('active')) {

				//hitクラス先に開く
				slideItem.slideToggle(slide_speed,function() {

					//開いている要素を閉じる
					var siblingsItem=slideItem.siblings('div:visible');

					if(siblingsItem.length){

						siblingsItem.slideUp(slide_speed,function() {
							siblingsItem.prev('h3').toggleClass("active");
							//scroll
							scroll_top(keep_Item);
						});

					}else{

						//開いている要素がない
						//scroll
						scroll_top(keep_Item);
					}
				});

			}

			if (!$(this).hasClass('active')) {

				//hitクラスを閉じる
				slideItem.slideToggle(slide_speed,function() {
					//scroll
					scroll_top(keep_Item);
				});

			}

		});

		//hover-toggle
		accordionItem.find('h3').hover(function () {

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});

		//scroll-accordion-top
		function scroll_top(scrollitem){

			var position=scrollitem.offset().top;
			$('body,html').animate({scrollTop:position-10},400);

		}

	});

})(jQuery);


● scroll-accordion02.js、JS名は任意に変更可。注意、42x用です。

2. 先に閉じてから、指定要素を開くタイプ。



//scroll-accordion02.js
//日本語
//Scroll-Accordion

//Scroll-accordion-42x
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//active要素を指定して開く
		var no=0;
		var keep_Item;

		//----------------------------------
		var accordionItem=$('#accordion-42x');//Item

		//MENUブロック一旦非表示
		accordionItem.find('.accordion-block').hide();

		//active要素を指定して開く
		accordionItem.find('h3').eq(no).addClass('active').next('div').show(100,function(){

			//指定要素位置にスクロール
			scroll_top(accordionItem.find('h3').eq(no));

		});

		//click-action
		accordionItem.find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			keep_Item=$(this);

			//hit分岐処理
			if ($(this).hasClass('active')) {

				//hitクラス切り替、開いている要素を閉じる
				var siblingsItem=$(this).siblings('div:visible');
				if(siblingsItem.length){

					siblingsItem.slideUp(slide_speed,function() {
						siblingsItem.prev('h3').toggleClass("active");
						slideItem.slideToggle(slide_speed,function() {
							//scroll
							scroll_top(keep_Item);
						});
					});

				}else{

					//開いている要素がない
					slideItem.slideToggle(slide_speed,function() {
						//scroll
						scroll_top(keep_Item);
					});
				}

			}

			if (!$(this).hasClass('active')) {

				//hitクラスを閉じる
				slideItem.slideToggle(slide_speed,function() {
					//scroll
					scroll_top(keep_Item);
				});

			}

		});

		//hover-toggle
		accordionItem.find('h3').hover(function () {

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});

		//scroll-accordion-top
		function scroll_top(scrollitem){

			var position=scrollitem.offset().top;
			$('body,html').animate({scrollTop:position-10},400);

		}

	});

})(jQuery);


● scroll-accordion03.js、JS名は任意に変更可。注意、43x用です。

3. 同時に開閉するタイプ。



//scroll-accordion03.js
//日本語
//Scroll-Accordion

//Scroll-accordion-43x
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//active要素を指定して開く
		var no=0;
		//var keep_Item;

		//----------------------------------
		var accordionItem=$('#accordion-43x');//Item

		//MENUブロック一旦非表示
		accordionItem.find('.accordion-block').hide();

		//active要素を指定して開く
		accordionItem.find('h3').eq(no).addClass('active').next('div').show(100,function(){

			//指定要素位置にスクロール
			scroll_top(accordionItem.find('h3').eq(no));

		});

		//click-action
		accordionItem.find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			keep_Item=$(this);

			//hit分岐処理
			if ($(this).hasClass('active')) {

				//閉じる要素
				var siblingsItem=$(this).siblings('div:visible');

				if(siblingsItem.length){
					//同時
					slideItem.slideToggle(slide_speed).siblings('div:visible').slideUp(slide_speed,function() {

						$(this).prev('h3').removeClass('active');
						//scroll
						scroll_top(keep_Item);
					});
				}
				if(!siblingsItem.length){
					//開くのみ
					slideItem.slideToggle(slide_speed,function() {
						//scroll
						scroll_top(keep_Item);
					});
				}

			}

			if (!$(this).hasClass('active')) {

				//hitクラスを閉じる
				slideItem.slideToggle(slide_speed,function() {
					//scroll
					scroll_top(keep_Item);
				});

			}

		});

		//hover-toggle
		accordionItem.find('h3').hover(function () {

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});

		//scroll-accordion-top
		function scroll_top(scrollitem){

			var position=scrollitem.offset().top;
			$('body,html').animate({scrollTop:position-10},400);

		}

	});

})(jQuery);


● scroll-accordion04.js、JS名は任意に変更可。注意、44x用です。

4. 個別に開閉するタイプ、の4種類が有ります。
デモでは個別に開閉するタイプのみ最初全てとじています。



//scroll-accordion04.js
//日本語
//Scroll-Accordion

//Scroll-accordion-44x
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//active要素を指定して開く
		var no=0;
		var keep_Item;

		//----------------------------------
		var accordionItem=$('#accordion-44x');//Item

		//MENUブロック一旦非表示
		accordionItem.find('.accordion-block').hide();

		//active要素を指定して開く/使用していない
		//accordionItem.find('h3').eq(no).addClass('active').next('div').show(100,function(){

			//指定要素位置にスクロール
			//scroll_top(accordionItem.find('h3').eq(no));

		//});

		//click-action
		accordionItem.find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			keep_Item=$(this);
			
			//hit分岐処理
			if ($(this).hasClass('active')) {

				//hitクラスを開く
				slideItem.slideToggle(slide_speed,function() {
					//scroll
					scroll_top(keep_Item);
				});

			}else{

				//hitクラスを閉じる
				slideItem.slideToggle(slide_speed,function() {
					//scroll
					scroll_top(keep_Item);
				});

			}

		});

		//hover-toggle
		accordionItem.find('h3').hover(function () {

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});

		//scroll-accordion-top
		function scroll_top(scrollitem){

			var position=scrollitem.offset().top;
			$('body,html').animate({scrollTop:position-10},400);

		}

	});

})(jQuery);

注釈文を削除すれば、幾分早くなります。


CSS

scroll-accordion.css、CSS名は任意に変更可
CSSは一例ですので、用途に合わせて幅など変更可能です。



/*scroll-accordion*/
.accordion-box {
width:640px;
height:auto;
margin:0;
padding:0;
text-align:left;
background-color:#FFFFFF;
}

.accordion-box h3 {
width:628px;
height:20px;
margin:1px 0 0 1px;
padding:2px 0 0 10px;
line-height:20px;
color:#FFFFFF;
font-size:12px;
background:url(/main/images/arrow_7.gif) no-repeat;
background-color:#BBBBBB;
background-position:right 0px;
cursor:pointer;
}
/* active */
.accordion-box h3.active {
background-position:right -21px;
}
/* hovered */
.accordion-box h3.hovered {
background-color:#555555;
}

.accordion-box .accordion-block {
display:block;
width:630px;
margin:10px 0 0 0;
padding:5px;
font-size:12px;
color:#000000;
background-color:#FFFFFF;
}

.align-right{
text-align:right;
}

当方のサンプルの例です。


スクロールの注意点

特に、最後のアコーディオン要素の下に何らかのコンテンツが無ければ、「TOP」までスクロールしない場合が有ります。(HTMLの高さ足らずでスクロール仕様がない)
ブラウザの高さなどを考慮した事前のHTML構造と確認が必要です。好みもあるが、2、3番あたりが自動で閉じますから使い易いかも知れません。


アンカー指定でスクロール

当方で、「目次」に利用している、アンカー指定でスクロールするJSです。(公開するのは勿体ないが...)
common.jsなどに組み込んでおけば常時利用できます。
Aリンクまたはボタン要素、などのHTML要素にアンカー指定するだけです。



アクション例、設定は自由
<p class="align-right">▲[ <a href="#contents-top">CONTENTS-TOP</a> ]</p>

アンカー例、設定は自由
<h3 id="contents-top">jQuery Scroll-Accordion DEMO1</h3>

● JSは下記の様に成ります。



//goto-anchor
$('a[href^="#"]').click(function() {
	var href= $(this).attr("href");
	var target=$(href == "#" || href == "" ? 'html':href);
	var position=target.offset().top;
	$('body,html').animate({scrollTop:position-20},400);
	return false;
});
-------------------------------------------------------

属性フィルター、通常は下記のようですが
$('a[href^=#]')....

jquery-3.0では下記の様に記述しないとエラーになります、他バージョンもOK
$('a[href^="#"]')....


これらの改造などは自由です。但し旨く機能しない事態に陥り易く、siblingsを利用していますのでより複雑です。
結構不可解なことも起こるので、これ以上の詳細は省略します。


jQuery色々なアコーディオンから改造しました

上のJSは、下記ページの色々なアコーディオン、サンプルの1つを修正しました。

【参照】当方の記事 : jQuery色々なアコーディオン、サンプル


画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。

透過矢印画像 arrow.gif 21x44 透過矢印画像 arrow_2.gif 20x44 透過矢印画像 arrow_7.gif 19x40 透過矢印画像 arrow_5gif 19x40

 


 

以上です。

 


[ この記事のURL ]


タグ:jquery , Accordion

 

ブログ記事一覧



[1]