要素の数だけ繰り返しscroll値を取得 | AP*DesignFactory | ホームページ制作 Wordpress LPコーディング – 東京 調布を拠点に活動する個人事業主

BLOG

要素の数だけ繰り返しscroll値を取得

jQuery/javascript
Posted : 2018.8.17
Update : 2019.1.4

一度に複数の要素のscroll値を取得してアレコレする案件があったので、jQueryで作成してみました。

サンプルは(クリックできるボタンの数)と同数の(コンテンツボックス)があったとして、ボタンがクリックされると、同じ順番のコンテンツの場所にスクロール移動します。
ボタン、コンテンツボックスに個別のIDは無し、アンカーリンクもありません。

scroll値を使って該当コンテンツへスクロールさせるサンプルページ

サンプルソース

html

<ul class="btnlist">
	<li>ボタン1</li>
	<li>ボタン2</li>
	<li>ボタン3</li>
	<li>ボタン4</li>
	<li>ボタン5</li>
	<li>ボタン6</li>
</ul>

<div class="contents">
	<div class="item">
	 <p>コンテンツ1</p>
	</div>
	<div class="item">
	 <p>コンテンツ2</p>
	</div>
	<div class="item">
	 <p>コンテンツ3</p>
	</div>
	<div class="item">
	 <p>コンテンツ4</p>
	</div>
	<div class="item">
	 <p>コンテンツ5</p>
	</div>
	<div class="item">
	 <p>コンテンツ6</p>
	</div>
</div>

jQuery

$(window).on('load',function(){ 

	// 各(.item)要素の初期のスクロール値を取得して、配列に格納
	var len =  $('div.contents .item').length;	
	var position =[];

	for (var i=0; i<len; i++) {
		var pos = $('div.contents .item').eq(i).offset().top-20; 
		position.push(pos);
	};
	
	$('ul.btnlist li').on('click', function() {
		//クリックされた(li)の順番を取得
		var index = $('ul.btnlist li').index(this);
		//position配列から、取得した(li)の順番と同じ順番の値を取り出して移動先の位置にセット
		$('html,body').animate({scrollTop: position[index]});
	});
	
});

実際はこの用途のために作ったわけではないのですが、わかりやすい使用例を掲載しました。
いろいろな使い道がありそうだと思います。