指定した要素を下にスクロールさせる/スクロールした値を取得するには scrollTop プロパティを使用します。
scrollTop：取得する場合の書き方
取得する要素.scrollTop;
scrollTop：変更する場合の書き方
変更する要素.scrollTop = 変更する数理;
例1：#element が下にスクロールされている値をクリックして取得し表示する（#text へ表示）。
css で親の #example 要素よりも子要素が縦のサイズが大きく指定されていいます。overflow: auto; が #example には指定されている為縦にスクロールできるようになっています。
HTML
<div id="example">
<div class="textbox">
<p>↓ボタンをクリックでスクロール</p>
<p>↓</p>
<p>↓ボタンをクリックでスクロール</p>
<p>↓</p>
</div>
</div>
<button id="sc_btn">クリックで下50pxずつへスクロールします</button>
CSS
#example{
width: 500px;
height:200px;
padding: 10px;
background: #eee;
border: solid 1px #666;
overflow: auto;
}
.textbox{
height: 1000px;
margin: 0;
padding: 0;
}
p{
margin: 0 0 100px;
}
JavaScript
ボタン #sc_btn をクリックすると#example が下に何pxスクロールされたかを #text へ表示します。
window.onload = init;
function init(){
var element = document.getElementById('example');
var btn = document.getElementById('sc_btn');
var text = document.getElementById('text');
btn.onclick = function(){
var elementTop = element.scrollTop ;
text.innerHTML = elementTop;
};
};
サンプル
下のグレーのボックス #example の横にでているスクロールバーを下に動かし、ボタンをクリックしてみて下さい。現在のスクロールされている値が表示されます。
例2：#element の下のボタンをクリックして下に 50px ずつスクロールさせる。
HTML
<div id="example">
<p>スクロールしてボタンをクリック→</p>
</div>
<button id="sc_btn">左へスクロールした値を取得します→</button>
<p id="text">0</p>
CSS
#example{
width: 500px;
height:100px;
padding: 10px;
background: #eee;
border: solid 1px #666;
overflow: auto;
}
p{
width: 1000px;
margin: 0;
padding: 0;
}
JavaScript
ボタン #sc_btn をクリックすると #example のスクロール移動値が 50px ずつ足されて下へ移動します。
window.onload = init;
function init(){
var element = document.getElementById('example');
var btn = document.getElementById('sc_btn');
btn.onclick = function(){
element.scrollTop += 50;
};
};
サンプル
下のグレーのボックス #example 下のボタンをクリックすると下へ50pxずつスクロールします。
