（jQueryの学習）CSS：スクロール位置を操作する／scrollTopメソッド／縦スクロール位置を設定する（その１）

CSSのスクロール位置を操作する方法の2回目です。

本日は「2.要素の縦スクロール位置（Y座標）を設定する」を学びます。

まずは要素に対する縦スクロール位置を変更します。

2.要素の縦スクロール位置（Y座標）を設定する

2-1.scrollTopメソッド【返却値(jQueryオブジェクト) = 要素.scrollTop(数値)】で要素の縦スクロール位置（Y座標）を設定する

次に要素の縦スクロール位置（Y座標）を変更します。

以下のサンプルのラジオボタンを操作することで、縦スクロールすることがわかります。

サンプルソース

// HTML
縦スクロール位置（Y座標）: 
0px<INPUT type="radio" name="y-scroll5-2-1" value="0" checked="checked">
20px<INPUT type="radio" name="y-scroll5-2-1" value="20">
40px<INPUT type="radio" name="y-scroll5-2-1" value="40">
60px<INPUT type="radio" name="y-scroll5-2-1" value="60"><br>
<div class="box-inline">
  <b>テストエリア３</b>
  <div class="box-css-test-area-3">・・・略・・・</div>
  <div>scrollTop: <span id="st">0</span></div>
</div>

// CSS
/* テストエリア３ */
.box-css-test-area-3 {overflow:scroll; background: #F5EEFF; border:5px solid #44f; margin: 5px; padding: 5px; max-height:100px; max-width:200px; float:right;}

// jQuery
$(function() {
  // ラジオボタンの変更イベントに応じて縦スクロール位置を変更する
  $("input[type=radio]").change(function(){
    // 【構文】返却値(jQueryオブジェクト) = 要素.scrollTop(数値)
    $(".box-css-test-area-3").scrollTop($("input:radio:checked").val());
  });
  // 変更位置を捉える処理
  $(".box-css-test-area-3").scroll(function(){
    $("span #st").text($(this).scrollTop());
  });
});

実装例

指定した位置に縦スクロールします。

縦スクロール位置（Y座標）: 0px 20px 40px 60px

テストエリア３

【List】
1.ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
2.xxxxx
3.xxxxx
4.xxxxx
5.xxxxx
6.xxxxx
7.xxxxx
8.xxxxx

scrollTop: 0

次回はブラウザに対する縦スクロール位置を変更する方法を学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share