element.scrollTopは、「element」に指定した要素のスクロールビューを、垂直方向にスクロールした上端からの距離を取得、もしくは、設定するプロパティ。
構文
取得
var $scrollTop = $elementNodeReference.scrollTop;
戻り値
指定した要素のスクロールビューを、垂直方向にスクロールした上端からの距離。単位は、ピクセル。
設定
$elementNodeReference.scrollTop = 垂直方向のスクロール距離;
「垂直方向のスクロール距離」を、ピクセル単位の数値で指定。
サンプル
垂直方向にスクロールした距離：
サンプルの動作について
「getScrollTop()」ボタンをクリックすると、「垂直方向にスクロールした距離：」の右横に「100px」と表示する。
垂直方向にスクロールした後で、「getScrollTop()」ボタンをクリックすると、「垂直方向にスクロールした距離：」の右横に現在の上端からのスクロール距離を表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sample" ).scrollTop = 100;
}
function getScrollTop() {
var $elementNodeReference = document.getElementById( "sample" );
var $scrollTop = $elementNodeReference.scrollTop;
document.getElementById( "sampleOutput1" ).innerHTML = $scrollTop + "px";
}
</script>
window.onload = function () {
document.getElementById( "sample" ).scrollTop = 100;
}
function getScrollTop() {
var $elementNodeReference = document.getElementById( "sample" );
var $scrollTop = $elementNodeReference.scrollTop;
document.getElementById( "sampleOutput1" ).innerHTML = $scrollTop + "px";
}
</script>
CSS
<style type="text/css">
#sample{
overflow: scroll;
height: 100px;
width: 300px;
padding: 10px;
margin: 10px;
background-color: #fffee7;
border: 1px solid #dddddd;
border-radius: 5px;
}
#sampleContent{
width: 500px;
height: 300px;
background-color: yellow;
}
</style>
#sample{
overflow: scroll;
height: 100px;
width: 300px;
padding: 10px;
margin: 10px;
background-color: #fffee7;
border: 1px solid #dddddd;
border-radius: 5px;
}
#sampleContent{
width: 500px;
height: 300px;
background-color: yellow;
}
</style>
HTML
<button onclick="getScrollTop();">getScrollTop()</button>
<p>垂直方向にスクロールした距離：<span id="sampleOutput1"></span></p>
<div id="sample">
<div id="sampleContent">
</div>
</div>
<p>垂直方向にスクロールした距離：<span id="sampleOutput1"></span></p>
<div id="sample">
<div id="sampleContent">
</div>
</div>