[Javascript] JS로 간단하게 상단 이동 버튼 만들기 - scrollTo()

 

요즘 목록 페이지들은 대부분 무한 스크롤 형태로 구현되어 있다. 예전과 같은 페이지네이션 형태를 채택하는 서비스는 점점 줄어드는 중이다. 이런 무한 스크롤 리스트의 경우, 사용자의 경험을 위해 필히 상단으로 이동하는 버튼을 만들어야 한다. 아주 간단한 자바스크립트 메소드로 해결 가능!

 

Window.scrollTo()

Javascript는 Window.scrollTo()라는 메소드를 제공한다.

해당 메소드는 Window 내에서 원하는 위치로 스크롤을 이동시킬 수 있다.

// 기본 형태
window.scrollTo(x-좌표, y-좌표)

 

scrollTo의 인자로 behavior를 추가하면 모션 설정도 가능하다.

// behavior에는 auto와 smooth를 입력할 수 있다. (기본값은 auto)
window.scrollTo({
    top: 0,
    behavior: "smooth",
});

 

- scroll()도 기능적으로 동일한 역할을 한다.

https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo

Window.scrollTo() - Web API | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

Window.scroll() - Web APIs | MDN