[javascript] 자바스크립트 scroll to top 버튼 만들기

참고: https://w3collective.com/scroll-to-top-button-javascript/

이 포스트에서는 JavaScript를 사용하여 화면을 맨 위로 스크롤하는 버튼을 만들어 보겠습니다. 이 버튼을 사용하면 사용자가 아래로 스크롤 했다가 빠르게 페이지 상단으로 돌아갈 수 있으므로 콘텐츠 페이지가 긴 모바일 페이지를 만들 때 특히 유용합니다.

먼저 JavaScript 코드를 실행할 scrollTop 함수를 생성하겠습니다.

const scrollTop = function () {
  // JavaScript 코드 위치
};

scrollTop();

다음으로 scrollTop 함수 안에서 HTML 버튼을 생성하겠습니다.

const scrollTop = function () {
  const scrollBtn = document.createElement("button");
  scrollBtn.innerHTML = "↑";
  scrollBtn.setAttribute("id", "scroll-btn");
  document.body.appendChild(scrollBtn);
};

scrollTop();

1. scrollBtn 이라는 이름의 const 변수에 HTML 버튼 요소를 생성합니다.
2. 버튼 요소의 HTML로 ↑ 을 넣습니다. 이는 위쪽 화살표입니다.
3. 버튼의 id로 scroll-btn 이라고 지정합니다.
4. scrollBtn을 dom에 삽입합니다.

다음은 scrollBtnDisplay 함수를 이벤트리스너로 등록합니다.

const scrollBtnDisplay = function () {
  window.scrollY > window.innerHeight
    ? scrollBtn.classList.add("show")
    : scrollBtn.classList.remove("show");
};

window.addEventListener("scroll", scrollBtnDisplay);

위의 코드는 브라우저 창의 높이 보다 페이지를 더 아래로 스크롤 한 경우 show 클래스를 토글합니다. 마지막으로 사용자가 scrollTop 함수에서 추가한 버튼을 클릭할 때를 위한 기능을 추가해 보겠습니다.

const scrollWindow = function () {  
  if (window.scrollY != 0) {
    setTimeout(function () {
      window.scrollTo(0, window.scrollY - 50);
      scrollWindow();
    }, 10);
  }
};

scrollBtn.addEventListener("click", scrollWindow);

부드럽게 스크롤을 올리는 CSS의 기능인 scroll-behavior:smooth을 사용할 수도 있지만 아직 Safari에서는 지원되지 않기 때문에 이 기능 대신 페이지 상단에 도달할 때 까지 10 밀리초 마다 -50px를 스크롤 하는 setTimeout을 사용했습니다.

마지막으로 show 클래스가 토글될 때 페이드 인/아웃 되는 둥근 버튼을 만들 CSS를 추가하겠습니다.

#scroll-btn {       
    opacity: 0;   
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: #ef476f;
    position: fixed;
    bottom: 10%;
    right: 10%;    
    border: 2px solid #fff;
    border-radius: 50%; 
    font: bold 20px monospace;       
    transition: opacity 0.5s, transform 0.5s;
}
#scroll-btn.show {      
    opacity: 1;  
    transition: opacity 1s, transform 1s;     
}

완전히 작동하는 스크롤 버튼을 만들어 봤습니다. 이 포스트에서 사용한 전체 코드는 다음 codepen에서 확인할 수 있습니다.

See the Pen scroll to top by shinyks (@shinyks) on CodePen.

관련 글

자바스크립트 setTimeout 사용 방법

자바스크립트 타이머