ScrollToTop 버튼

[미니 프로젝트] 위젯 만들기

1-1 HTML만 사용하기

<a href="#">↑</a>

HTML의 a 태그(anchor)를 사용해 간단하게 ScrollToTop 버튼을 만들 수 있다. 하지만 이렇게 하면 웹페이지 주소 뒤에 #이 붙어 지저분해 보인다.

1-2 JS

그래서 HTML에 JS를 추가해 ScrollToTop 버튼을 튜닝하기로 했다. 먼저 해당 버튼에 class와 id부터 부여했다.

<a href="#" class="scroll-to-top" id="scrollToTopBtn">↑</a>

버튼에 부여한 scrollToTopBtn이라는 id를 바탕으로 JS 코드를 작성했다.

<script>
// HTML 로딩 후에 코드 실행
// btn 변수에 해당 id를 가진 html 요소 저장
document.addEventListener("DOMContentLoaded", function() {
  const btn = document.getElementById("scrollToTopBtn");

  // 스크롤 이벤트 감지 
    // 300px 이상 스크롤했을 때 버튼 보이기, 아니면 버튼 숨기기 (실제 처리는 CSS에서)
  window.addEventListener("scroll", function() {
    if (window.scrollY > 300) {
      btn.classList.add("show");
    } else {
      btn.classList.remove("show");
    }
  });

  // 버튼 클릭 이벤트
    // <a href="#"> 클릭 시 위로 순간이동하는 기본 동작 방지
    // 위로 스크롤하기, 부드럽게 움직이게
  btn.addEventListener("click", function(e) {
    e.preventDefault();
    window.scrollTo({
      top: 0,
      behavior: "smooth" 
    });
  });
});
</script>

1-3 CSS

CSS에서는 웹사이트 내 스타일 관리가 편하게 버튼의 id가 아니라 class인 scroll-to-top을 사용했다.

JS에서 추가 class를 붙여 만든 .scroll-to-top.show가 실제로 화면에 보이도록 visibility와 opacity를 설정했다.

<style>
.scroll-to-top {
  /* 위치 */
  position: fixed;       /* 화면에 고정 */
  bottom: 30px; 
  right: 30px;
  z-index: 9999;         /* 항상 레이어 맨 위에 표시 */

  /* 크기 */
  font-size: 22px;       /* 화살표 크기 */
  padding: 10px 17px;    /* 버튼 안쪽 여백 */

  /* 모양 */
  background: #fafafa;      /* 버튼 배경색 */
  color: #000000;           /* 글자색 */
  text-align: center;
  text-decoration: none; /* 밑줄 제거 */
  border-radius: 50%;    /* 둥근 원형 버튼 */

  /* 표시 */
  visibility: hidden;         /* 기본적으로 숨김 */
  opacity: 0;            /* 처음엔 투명 */
  transition: background 0.6s, opacity 0.3s; /* 부드러운 변화 효과 */
}

.scroll-to-top.show {
  visibility: visible; /* 나타나게 함 */
  opacity: 0.7;            /* 투명도 70% */
}

.scroll-to-top:hover {
  background: #CFCABE;      /* 마우스 올렸을 때 색 변화 */
}
</style>

+ 정리

이번 글에서는 HTML, CSS, JS를 사용해 간단하게 ScrollToTop 버튼을 만드는 법을 알아봤다.