一度に複数の要素のscroll値を取得してアレコレする案件があったので、jQueryで作成してみました。
サンプルは(クリックできるボタンの数)と同数の(コンテンツボックス)があったとして、ボタンがクリックされると、同じ順番のコンテンツの場所にスクロール移動します。
ボタン、コンテンツボックスに個別のIDは無し、アンカーリンクもありません。
サンプルソース
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]});
});
});
実際はこの用途のために作ったわけではないのですが、わかりやすい使用例を掲載しました。
いろいろな使い道がありそうだと思います。