바닐라 JS 및 CSS로 맨 위로 스크롤 버튼을 만드는 방법

이 자습서에서는 CSSinset 속기 및 기본 JavaScript를 사용하여 맨 위로 스크롤 버튼을 만드는 방법을 몇 가지 짧은 단계로 학습합니다.

맨 위로 스크롤 버튼은 콘텐츠가 많은 웹 사이트, 무한 스크롤이 있는 페이지 또는 콘텐츠 스크롤이 확장될 수 있는 작은 화면의 모바일 장치에 매우 유용할 수 있습니다.

forking this template.에서 이 자습서를 따라할 수 있습니다.

1단계, 버튼 만들기

스크롤 버튼을 만들려면 href="#" 앵커 태그를 사용하여 클릭하면 브라우저가 페이지 상단으로 돌아가게 하거나 사용자 정의 ID를 사용하여 페이지의 특정 부분으로 돌아갈 수 있습니다.
<a href="#">scroll-to-top</a>

2단계, 버튼 배치 및 스타일 지정

뷰포트를 기준으로 버튼 위치를 고정하려면 앵커 태그에 position: fixed를 설정해야 합니다. 요소 위치가 고정되면 일반 문서 흐름에서 제거된 다음 뷰포트를 기준으로 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성으로 배치됩니다.

하지만 inset 라는 위치 지정 속성에 대한 약칭이 있습니다.
Inset은 margin-top, margin-right, margin-bottom 및 margin-left를 모두 하나로 설정하는 데 사용되는 margin 속기처럼 작동합니다.

통사론

inset: top right bottom left

auto가 inset의 값으로 사용되면 해당 값이 생략된 것으로 간주합니다.
따라서 아래와 같이 삽입을 사용하여 뷰포트의 오른쪽 하단 모서리에 버튼을 배치할 수 있습니다.

inset: auto 2em 2em auto;

함께 배치하려면 앵커 태그에 클래스scrollToTopBtn를 추가하고 아래와 같이 버튼 스타일을 지정합니다.

.scrollToTopBtn {
  color: #f2f2f2;
  background-color: #151515;
  text-decoration: none;
  border-radius: 25px;
  position: fixed;
  outline: none;
  z-index: 100;
  padding: 0.75em 1.5em;
  inset: auto 2em 2em auto;
}

3단계, 반응형 버튼 만들기

이제 맨 위로 스크롤 버튼의 스타일이 지정되고 올바르게 배치되며 작동합니다. 하지만 문제가 있습니다. 버튼이 항상 보입니다. 이를 수정하려면 JavaScript를 사용하여 페이지 스크롤에 따라 버튼을 숨기고 표시해야 합니다.

그러기 위해서는 먼저 버튼을 가져와서 변수에 저장합니다.
const scrollToTopBtn = document.querySelector(".scrollToTopBtn");
그런 다음 오프셋 값에 대한 문서의 루트 요소를 가져옵니다.
const rootElement = document.documentElement;
다음으로 스크롤 이벤트에 이벤트 리스너를 등록하여 버튼 가시성 상태를 계산해야 합니다.

const handleScroll = () => {}
document.addEventListener("scroll", handleScroll);

handleScroll 함수는 사용자가 스크롤할 때마다 호출됩니다.

그런 다음 스크롤할 수 있는 총 픽셀 수가 필요하고 handleScroll 함수 내에서 이를 얻으려면 스크롤할 수 있는 총 픽셀 수를 얻기 위해 scrollHeight에서 clientHeight를 빼야 합니다.
const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
이제 스크롤할 수 있는 최대 픽셀 수를 얻었으므로 0과 1 사이의 스크롤 비율을 얻기 위해 페이지를 스크롤한 양으로 나누어야 합니다. 스크롤 비율을 사용하여 숨길 위치를 조정할 수 있습니다. 버튼을 표시합니다. 1에 가까울수록 사용자는 버튼을 보기 전에 더 많이 스크롤해야 합니다.

if ((rootElement.scrollTop / scrollTotal) > 0.25) {
    // Show the button
    scrollToTopBtn.classList.add("isVisible")
} else {
    // Hide the button
    scrollToTopBtn.classList.remove("isVisible")
}

마지막으로 작동하게 하려면 먼저 scrollToTopBtn 클래스에 opacity: 0;를 추가하여 페이지 로드 시 버튼을 숨겨야 합니다. 그런 다음 페이지 스크롤이 선택한 비율을 통과할 때 버튼에 isVisible 클래스opacity: 1;를 추가합니다. 마지막으로 버튼 애니메이션을 위해 scrollToTopBtn 클래스에 transition: all 250ms ease-in-out;를 추가합니다.

.scrollToTopBtn {
  color: #f2f2f2;
  background-color: #151515;
  text-decoration: none;
  border-radius: 25px;
  position: fixed;
  outline: none;
  z-index: 100;
  opacity: 0;
  padding: 0.75em 1.5em;
  inset: auto 2em 2em auto;
  transition: all 250ms ease-in-out;
}

.isVisible {
  opacity: 1;
}

4단계, 원치 않는 클릭 수정

맨 위로 스크롤 버튼이 숨겨져 있어도 여전히 클릭할 수 있지만 이는 발생하지 않아야 합니다. 이 문제를 해결하려면 scrollToTopBtn 클래스에 pointer-events: none;를 추가하여 클릭 이벤트를 무시하고 isVisible 클래스에 pointer-events: auto;를 추가하여 버튼이 표시될 때 클릭 이벤트를 다시 가져옵니다.

.scrollToTopBtn {
  color: #f2f2f2;
  background-color: #151515;
  text-decoration: none;
  border-radius: 25px;
  position: fixed;
  outline: none;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  padding: 0.75em 1.5em;
  inset: auto 2em 2em auto;
  transition: all 250ms ease-in-out;
}

.isVisible {
  pointer-events: auto;
  opacity: 1;
}

5단계, 페이지에 부드러운 스크롤 추가

이제 맨 위로 스크롤 버튼이 여전히 완벽하게 작동하므로 부드러운 스크롤로 웹 사이트에 멋진 터치를 추가할 수 있습니다. 그렇게 하려면 html 태그에 scroll-behavior: smooth;를 추가하기만 하면 됩니다.

html {
  scroll-behavior: smooth;
}

결론적으로

맨 위로 스크롤 버튼은 웹 사이트의 사용자 경험을 크게 향상시킬 수 있는 간단하면서도 유용한 기능입니다. 이 튜토리얼에서는 라이브러리 없이 몇 줄의 코드만으로 맨 위로 스크롤 버튼을 빌드하는 방법을 보여 주었습니다. NexusCode.online에서 최종 코드를 보고 재생할 수 있습니다.