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

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

<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);
}

※ 詳細はこちら

こちらも参考

タイトルとURLをコピーしました