버튼 클릭시 스크롤 맨 위로 이동

프로젝트를 진행하면서 위로가기 버튼을 구현하게 되어서 해당 기능에 대해 공부를 해보았다. 

 

코드

HTML

<div class="header"></div>
<div class="main" style="background-color: blanchedalmond">
  스크롤 내려갑니다.
</div>
<div class="main" style="background-color: pink">스크롤 내려갑니다.</div>
<button class="scroll-top-btn" id="scroll-top-btn">위로가기</button>

CSS

  .header {
    background-color: green;
    width: 100%;
    height: 50px;
  }

  .main {
    width: 100%;
    height: 2000px;
    font-size: 50px;
  }

  .scroll-top-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 100px;
    height: 50px;
  }

Javascript

  document
    .getElementById("scroll-top-btn")
    .addEventListener("click", scrollToTop);

  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

 

설명

구현 방법

'위로가기' 버튼을 누르면 스크롤 이동을 통해 화면의 맨 위로 이동하도록 구현하면 된다고 생각했다.

화면상에서 강제로? 특정 위치로 이동할 수 있는 함수를 찾아보니까 window.scrollTo 가 있는 것을 찾았다.

 

코드 설명

window.scrollTo 메서드는 문서의 특정 위치로 스크롤한다. 이 메서드는 두 가지 반식으로 사용할 수 있다!

• 절대 위치로 스크롤
• 옵션 객체를 사용하여 스크롤

1. 절대 위치로 스크롤

window.scrollTo(x, y)

/*
예시) window.scrollTo(100,500);  
페이지의 가로 방향으로 100px, 세로 방향으로 500px 이동
*/

위와 같은 형식으로 사용하며, 페이지의 왼쪽 위를 기준으로 절대위치 x, y 로 스크롤한다.

 

2. 옵션 객체를 사용하여 스크롤

window.scrollTo 은 옵션 객체를 사용하여 스크롤을 더 세부적으로 제어할 수 있다. 이 방식은 top, left, behavior 속성을 사용할 수 있다.

window.scrollTo({
  top: 0, // 세로 방향으로 스크롤할 위치 (픽셀 단위)
  left: 0, // 가로 방향으로 스크롤할 위치 (픽셀 단위)
  behavior: 'smooth' // 스크롤 동작: 'auto' (기본값) 또는 'smooth'
});

• top: 세로 방향으로 스크롤할 위치를 지정.(기본값: 0)
• left: 가로 방향으로 스크롤할 위치를 지정(기본값: 0)
• behavior: 스크롤 애니메이션의 유형을 지정. 'auto'는 즉시 스크롤을 이동하며, 'smooth'는 부드럽게 스크롤을 이동. (기본값: 'auto')

 

완성

 

참고

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

Window.scrollTo() - Web API | MDN