본문 바로가기

CSS HTML JS

스크롤 이동시키는 방법 :: $(window).scrollTop() :: scrollTo()


jQuery

✔ 맨 위로 스크롤 이동시키는 방법 : 

$(window).scrollTop(0);


javaScript

✔ 50px로 스크롤 이동시키는 방법 : 

Window.scrollTo(0 , 50) // Window.scrollTo( X좌표, Y좌표) - Y로 50px 만큼 이동

 


 

.scrolltop() 이란?

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

// 기본구조
$(selector).scrollTop()

// 웹브라우저 전체의 스크롤바 위치를 0px로 이동한다.
$(window).scrollTop(0);

// div 요소의 스크롤바 위치를 위에서 500px로 이동한다.
$('div').scrollTop(500);

예시 )

  $( '.btnGo' ).click( function() {  //btnGo 클래스 요소를 클릭하면 아래 함수를 실행
    $( 'pre' ).scrollTop( 20 ); // jbBox 클래스 요소의 스크롤을 20px 만큼 이동
   } );