ジャンプ先ページで特定の要素をウインドウの中央に表示

この記事について

つまずきポイント要約

• ページ読み込み直後にスクロールさせるとうまくいかないので setTimeout で遅らせる

ページ内リンクの要領で、特定の要素をウインドウの中央に表示する方法

<script type="text/javascript">
//ページの読み込みが完了したら
window.onload = function(){

var positionX = window.pageXOffset;
var positionY = window.pageYOffset;
	alert(positionX);
	alert(positionY);
//window.scrollTo( 0, 200) ;




// 要素の位置を取得する
var element = document.getElementById("jump");
var rect = element.getBoundingClientRect() ;

// 座標を計算する
var positionY = rect.top + window.pageYOffset ;	// Y座標のスクロール量
//	alert(positionY);
positionY = Math.floor(positionY) ; //小数点以下切り捨て
//	alert(positionY);

var winHeight = window.innerHeight; //現在のウインドウの高さ

	alert("ウインドウの高さ" + winHeight);

//0.5秒遅れてスクロールさせる。速いとうまくいかない※
setTimeout(function() { window.scrollTo( 0, positionY - winHeight/2) ; }, 500);
}
</script>

※　詳細はこちら

こちらも参考