HOME > > > > >

.scrollTop()

戻り値

int
スクロールされた距離

.scrolleLeft()の縦版。

jQueryオブジェクトが持つDOM要素の中でスクロールバーがある最初の要素のスクロール位置をpxで取得する。スクロールされてない場合、0となる。

非表示要素も対象となる。

サンプル

実行結果



.scrollLeft(), when called directly or animated as a property using .animate() will not work if the element(s) it is being applied to are hidden.

.scrollLeft(), when called directly or animated as a property using .animate() will not work if the element(s) it is being applied to are hidden.

Javascript

  1. $('.jqTest p').css({
  2.     display: 'inline-block',
  3.     width: 100,
  4.     height: 100,
  5.     border: '1px solid #CCCCCC',
  6.     overflow: 'auto'
  7. });
  8.  
  9. $('.jqTest .execute').click(function(){
  10.     alert($('.jqTest p').scrollTop());
  11. });

HTML

  1. <div class="jqTest">
  2.     <input type="button" value="execute" class="execute cq-btn m-primary">
  3.     <br><br>
  4.     <p>.scrollLeft(), when called directly or animated as a property using .animate() will not work if the element(s) it is being applied to are hidden.</p>
  5.     <p>.scrollLeft(), when called directly or animated as a property using .animate() will not work if the element(s) it is being applied to are hidden.</p>
  6. </div>

scrollTop(value)

引数

value
スクロール距離。単位はpx

スクロール距離を設定できます。これはjQueryオブジェクトが持つDOM要素でスクロールバーがある要素全てが対象になります。

ちなみに.animate()のプロパティとしても設定できます。

サンプル

実行結果



.scrollLeft(), when called directly or animated as a property using .animate() will not work if the element(s) it is being applied to are hidden.

.scrollLeft(), when called directly or animated as a property using .animate() will not work if the element(s) it is being applied to are hidden.

Javascript

  1. $('.jqTest2 p').css({
  2.     display: 'inline-block',
  3.     width: 100,
  4.     height: 100,
  5.     border: '1px solid #CCCCCC',
  6.     overflow: 'auto'
  7. });
  8.  
  9. $('.jqTest2 .animate').click(function(){
  10.     $('.jqTest2 p').animate({scrollTop: '+=' + 20 }, 'slow');
  11. });
  12.  
  13. $('.jqTest2 .reset').click(function(){
  14.     $('.jqTest2 p').scrollTop(0);
  15. });

HTML

  1. <div class="jqTest2">
  2.     <input type="button" value="animate" class="animate cq-btn m-primary">
  3.     <input type="button" value="reset" class="reset cq-btn m-danger">
  4.     <br><br>
  5.     <p>.scrollLeft(), when called directly or animated as a property using .animate() will not work if the element(s) it is being applied to are hidden.</p>
  6.     <p>.scrollLeft(), when called directly or animated as a property using .animate() will not work if the element(s) it is being applied to are hidden.</p>
  7. </div>