jQuery API の scrollTop( value ) は、マッチした要素の、スクロールバーの現在の垂直方向（縦）の位置を、設定するメソッド。上端をゼロとした、ピクセル単位の数値を、valueに設定する。
記述方法
jQuery( セレクター ) . scrollTop( 値 );
「セレクター」にマッチした要素の、スクロールバーの現在の垂直方向の位置を、「値」に設定する。
記述例
jQuery( '.jquery-sample' ) . scrollTop( 50 );
クラス名が「jquery-sample」である要素の、スクロールバーの現在の垂直方向の位置を、「50」に設定する。
実装例（サンプル）
scrollTop：
scrollLeft：
実装例（サンプル）の動作について
垂直方向（縦）のスクロールバーを移動すると、「scrollTop：」の右横の「86」の数値が変化する。
水平方向（横）のスクロールバーを移動すると、「scrollLeft：」の右横の「86」の数値が変化する。
「元に戻す」ボタンをクリックすると、ページを表示した時と同じ、垂直方向も水平方向も、86pxに戻す。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click( function () {
jQuery( '#jquery-sample-scrollTop' ) . scrollTop( 86 ) . scrollLeft( 86 );
} ) . click();
jQuery( '#jquery-sample-scrollTop' ) . scroll( function () {
var scrollTop = jQuery( this ) . scrollTop();
var scrollLeft = jQuery( this ) . scrollLeft();
jQuery( '#jquery-sample-message-scrollTop' ) . text( scrollTop + 'px' );
jQuery( '#jquery-sample-message-scrollLeft' ) . text( scrollLeft + 'px' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click( function () {
jQuery( '#jquery-sample-scrollTop' ) . scrollTop( 86 ) . scrollLeft( 86 );
} ) . click();
jQuery( '#jquery-sample-scrollTop' ) . scroll( function () {
var scrollTop = jQuery( this ) . scrollTop();
var scrollLeft = jQuery( this ) . scrollLeft();
jQuery( '#jquery-sample-message-scrollTop' ) . text( scrollTop + 'px' );
jQuery( '#jquery-sample-message-scrollLeft' ) . text( scrollLeft + 'px' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
width: 300px;
height: 270px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-scrollTop {
width: 150px;
height: 150px;
margin-top: 10px;
overflow: scroll;
background-color: yellow;
border: 20px solid purple;
border-radius: 20px;
}
#jquery-sample-scrollTop div div {
float: left;
width: 100px;
height: 100px;
border: 1px solid gray;
border-radius: 20px;
}
-->
</style>
<!--
#jquery-sample {
width: 300px;
height: 270px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-scrollTop {
width: 150px;
height: 150px;
margin-top: 10px;
overflow: scroll;
background-color: yellow;
border: 20px solid purple;
border-radius: 20px;
}
#jquery-sample-scrollTop div div {
float: left;
width: 100px;
height: 100px;
border: 1px solid gray;
border-radius: 20px;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
<button id="jquery-sample-button">元に戻す</button>
</p>
<p>
scrollTop：<span id="jquery-sample-message-scrollTop"></span>
</p>
<p>
scrollLeft：<span id="jquery-sample-message-scrollLeft"></span>
</p>
<div id="jquery-sample-scrollTop">
<div style="width: 306px;">
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<span style="clear: left;"></span>
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<span style="clear: left;"></span>
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<span style="clear: left;"></span>
</div>
</div>
</div>
<p>
<button id="jquery-sample-button">元に戻す</button>
</p>
<p>
scrollTop：<span id="jquery-sample-message-scrollTop"></span>
</p>
<p>
scrollLeft：<span id="jquery-sample-message-scrollLeft"></span>
</p>
<div id="jquery-sample-scrollTop">
<div style="width: 306px;">
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<span style="clear: left;"></span>
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<span style="clear: left;"></span>
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<span style="clear: left;"></span>
</div>
</div>
</div>