반응형

 

스크롤 이동


 

 해당 페이지 내에서 최상단으로 스크롤을 이동시키는 방법에 대해 알아보자.

 

 

- 윈도우 스크롤 이용하기

 
  window.scrollTo(0, 1000);
 

 

애니메이션 효과 사용하기

 
  window.scrollTo({
       top: 100,
       left: 100,
       behavior: "smooth",
  });
 

 

- 응용하기

 
  const scrollTop = (position = 0) => {
        try {
            document.body.scroll({
                behavior: 'smooth',
                left: 0,
                top: parseInt(position)
            });
        } catch (e) {
            console.log(e);
        }
  }
 


 자주 사용하는 경우 함수로 작성해두고, 해당 함수를 호출해서 사용하면 된다.

 

 

Window: scrollTo() method - Web APIs | MDN

Window.scrollTo() scrolls to a particular set of coordinates in the document.

developer.mozilla.org

 

반응형

블로그 이미지

SkyBaby

부부가 운영하는 정보 공유 공간입니다. 다양한 일상, 요리, 맛집탐방, 게임, 공부 등의 정보를 담고 있습니다.