scrollTop( value )

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>

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>

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>

スポンサード リンク

カテゴリー: API, CSS, DOM操作, JavaScript, jQuery, オフセット, スタイルプロパティ タグ: パーマリンク