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

引き続き、縦スクロール位置を変更する方法を学びます。

次はブラウザに対する縦スクロール位置を変更します。

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

1-1.では要素に対する縦スクロール位置（Y座標）を設定しましたが、
1-2.ではブラウザ（window）の縦スクロール位置（Y座標）を設定します。

サンプルソース

// HTML
縦スクロール位置（Y座標）: 
ページ最上部へ<INPUT type="radio" name="y-scroll5-2-2" value="0">
1/3ページへ<INPUT type="radio" name="y-scroll5-2-2" value="0.3333333">
1/2ページへ<INPUT type="radio" name="y-scroll5-2-2" value="0.5">
2/3ページへ<INPUT type="radio" name="y-scroll5-2-2" value="0.6666666">
ページ最下部へ<INPUT type="radio" name="y-scroll5-2-2" value="1">

// jQuery
$(function() {
  // ラジオボタンの変更イベントに応じて縦スクロール位置を変更する
  $("input[type=radio]").change(function(){
    var st = $("body").height() * $("input:radio:checked").val();
    // 【構文】返却値(jQueryオブジェクト) = 要素.scrollTop(数値)
    $(window).scrollTop(st);
  });
});

実装例

ブラウザを指定した位置に縦スクロールします。

縦スクロール位置（Y座標）: ページ最上部へ 1/3ページへ 1/2ページへ 2/3ページへ ページ最下部へ

いかがでしたか？
次回は「3.要素の横スクロール位置（X座標）を取得する」を学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share