jQuery逆引きリファレンス
ページのスクロール位置を設定／取得するには？（scrollTop／scrollLeft）
scrollTop／scrollLeftメソッドを使ってページスクロールの垂直位置／水平位置を設定もしくは取得するための基本的な方法を説明する。
ページのスクロール位置を設定／取得するには、scrollTop（垂直位置）／scrollLeft（水平位置）メソッドを利用します。
例えば以下は、ページロードのタイミングで<div id="main">要素の表示位置に、ページを自動スクロールします。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
#top {
width: 500px;
}
#chara {
margin: 30px;
}
#main {
position: absolute;
top: 150px;
left: 250px;
width: 250px;
}
</style>
</head>
<body>
<div id="top">ようこそWebDeliへ。<br />
ここにはWebページ作成に役立つ情報やツールが...
</div>
<p id="chara"><img src="http://www.web-deli.com/image/home_chara.gif"></p>
<div id="main">初めて当サイトを訪れてくださった方、ありがとう...中略...
</div>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function() {
var m = $('#main');
// <div id="main">要素の表示位置に自動スクロール
$(window)
.scrollTop(m.offset().top)
.scrollLeft(m.offset().left);
});
</script>
</body>
</html>
|
※実行するには、ページのリロードではなく、URLを指定して新たにロードすること。
［注意］上記のサンプルを試す方法
サンプルを実行する際には、スクロールが発生するよう、ブラウザーのウィンドウサイズを小さくしておいてください。そもそもスクロールしなくても<div id="main">要素が見えている状態では、サンプルは期待したように動作しませんので注意してください。
$(window)のwindowはブラウザーそのものを表すブラウザーオブジェクトの一種です。ページそのものを操作する際には、これを$()関数でjQueryオブジェクトに変換した上で、目的のメソッド（ここではscrollTop／scrollLeft）を呼び出してください。
<div id="main">要素の位置（垂直／水平座標）は、offsetメソッドで取得できます。offsetメソッドに関する詳細は、後日、別稿「次回のTIPS：要素の表示位置を取得／設定するには？」で解説の予定です。
［構文］scrollTop／scrollLeftメソッド
scrollTop(value)
scrollLeft(value)
- value： スクロール位置
引数valueを省略した場合には、scrollTop／scrollLeftメソッドは現在のスクロール位置（座標）を返します。
API：.scrollTop()｜.scrollLeft()｜.offset() カテゴリ：CSS｜Offset（オフセット）｜Manipulation（操作） > Style Properties（スタイルプロパティ）
API：jQuery()｜$() カテゴリ：Core（コア）
※以下では、本稿の前後を合わせて5回分（第43回～第47回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
44. URLフラグメントに一致するid値を持つ要素を取得するには？ ― :targetフィルター
:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明する。
45. 【現在、表示中】≫ ページのスクロール位置を設定／取得するには？（scrollTop／scrollLeft）
scrollTop／scrollLeftメソッドを使ってページスクロールの垂直位置／水平位置を設定もしくは取得するための基本的な方法を説明する。
