스크롤바 수직 위치를 정하는 방법 - .scrollTop()

.scrollTop()

.scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다.

 

기본형 1

.scrollTop()

스크롤바 수직 위치를 가져옵니다. 예를 들어

$( 'div' ).scrollTop();

는 div 요소의 스크롤바 수직 위치를 가져옵니다.

 

기본형 2

.scrollTop( value )

스크롤바 수직 위치를 정합니다. 예를 들어

$( 'div' ).scrollTop( 300 );

은 div 요소의 스크롤바 위치를 위에서 300px로 정합니다.

 

예제 1

버튼을 클릭하면 div 요소의 스크롤바 위치를 알려주는 예제입니다. 스크롤바를 움직이고 버튼을 클릭하면 값이 변합니다.

<div class="Box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
</div>

<button>Click</button>

.Box {
  width: 200px;
  height: 200px;
  overflow: auto;
  margin-bottom: 20px;
}

$( document ).ready( function() {
  $( 'button' ).click( function() {
    alert( $( '.Box' ).scrollTop() );
  });
});

 

예제 2

버튼을 클릭하면 div 요소의 스크롤바가 위에서 70px 위치로 이동합니다.

<div class="Box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
</div>

<button>Click</button>

.Box {
  width: 200px;
  height: 200px;
  overflow: auto;
  margin-bottom: 20px;
}

$( document ).ready( function() {
  $( 'button' ).click( function() {
    $( '.Box' ).scrollTop( 100 );
  });
});