자바스크립트 스크롤 맨 위로 가기 버튼(부드럽게)

Posted on by Damon

자바스크립트 스크롤 맨 위로 가기 버튼, 페이지 중간 또는 하단에서 버튼을 클릭하면 스크롤을 맨 위로 이동시키는 간단한 코드로 window.scrollTo() 메서드를 사용했으며 부드러운 이동을 위해 window.requestAnimationFrame() 메서드를 이용했습니다.

스크롤 맨 위로 가기 버튼

1. html페이지에 아래와 같이 버튼 요소를 추가합니다.

<button onclick="backToTop()" id="btn-back-to-top" title="위로 가기">Top</button>

2. CSS파일에 아래 스타일 코드를 입력합니다.

#btn-back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 9999;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#btn-back-to-top:hover {
  background-color: #333;
}

3. 마지막으로 아래 코드를 자바스크립트 파일에 추가해 줍니다.

// 스크롤 이벤트 리스너
window.addEventListener('scroll', () => {
  // 스크롤 위치가 100px 이상일 때 위로 가기 버튼을 보이게 함
  if (
    document.body.scrollTop > 100 ||
    document.documentElement.scrollTop > 20
  ) {
    document.getElementById('btn-back-to-top').style.display = 'block';
  } else {
    document.getElementById('btn-back-to-top').style.display = 'none';
  }
});

// 클릭 시 페이지 맨 위로 스크롤 (애니메이션 효과 추가)
function backToTop() {
  const position =
    document.documentElement.scrollTop || document.body.scrollTop;
  if (position) {
    window.requestAnimationFrame(() => {
      window.scrollTo(0, position - position / 10);
      backToTop();
    });
  }
}

코드펜에서 예제를 확인할 수 있으니 참고하시길 바랍니다.

See the Pen Scroll Back To Top Button – smooth by Damon (@jioscon) on CodePen.

버튼 디자인은 위 css 코드를 참고해 각자 취향에 맞게 다시 작성하시기 바랍니다.

logo
Iter