scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示

jQueryのscrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示する方法をご紹介します。

ボックス要素をページの上下左右中央に表示するCSSの記述

※ボックス要素（#iBox）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.2em;
	text-align:center;
	padding:15px 0 10px 0;
}
#iBox{
	width:150px;
	height:150px;
	background-color:#09F;
	position:absolute;
}
-->
</style>

jQueryのscrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示するJavaScriptの記述

※jquery.min.js（1.9.1）ファイルを読み込みます。ブラウザ高さ（height）・幅（width）を計り、ボックス要素（#iBox）を.scrollTop()と.scrollLeft()を使ってブラウザの上下左右中央に表示します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var strid="#iBox";	//ボックスのid名
	$(strid).css("top", ($(window).height()-$(strid).height()) / 2+$(window).scrollTop()+"px");
	$(strid).css("left", ($(window).width()-$(strid).width()) / 2+$(window).scrollLeft()+"px");
});
</script>

ボックス要素をページの上下左右中央に表示するHTMLの記述

※上下左右中央に表示するボックス要素（id=”iBox”）を用意しました。必要に応じて変更して下さい。

	<h1>150×150のボックスをページの上下左右中央に表示</h1>
	<div align="center">ブラウザサイズを変更した場合はページの更新（F5）を行って下さい。</div>
	<div id="iBox"></div>

scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示

scrollTopやscrollLeftを使ってボックス要素をページの上下左右中央に表示デモ

CSSだけでも出来ますがJavaScriptでやってみました。
ブラウザサイズを変更すると上下左右中央では無くなりますが、ページ更新（F5）を行うかwindow.onresize的な処理を入れれば解消できます。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

ディスプレイ広告

ディスプレイ広告