[React] scrollTo 스크롤 이벤트 오류 (찔끔찔끔 올라가는 버그)

홈페이지를 만들면서 클릭하면 최상단으로 올라가는 버튼을 만들었습니다.

 

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

문제 상황

엄청나게 간단한 코드인데 원인 모를 버그가 생깁니다.
버튼을 누르면 찔끔(?) 올라갔다가 멈추는 현상이 발생합니다.

왜 그런걸까 아무리 생각해봐도 답이 안나오는 상황에 구글링을 열심히 하여 해결방법을 찾았습니다.

 

const scrollToTop = () => {
    const scrollStep = -Math.floor(window.scrollY / 15);
    const scrollInterval = setInterval(() => {
      if (window.scrollY === 0) {
        clearInterval(scrollInterval);
      } else {
        window.scrollBy(0, scrollStep);
      }
    }, 15);
  };

코드를 해석하자면

const scrollStep = -Math.floor(window.scrollY / 15);

• scrollStep은 스크롤 단계를 나타내며, 스크롤 되어야 되는 양을 정의합니다.
• window.scrollY는 현재 스크롤 위치를 나타내며, 이 값을 15로 나누고 음수로 변환하여 양수 값을 갖게 합니다.
  - scrollStep 값을 15로 나누는 이유는 페이지를 부드럽게 스크롤하기 위해서이고음수로 변환하는 이유는 스크롤을 위로 움직이려면 음수 값을 사용해야 합니다.
• Math.floor 함수를 사용하여 소수 부분을 제거하고 정수로 만듭니다.

 

const scrollInterval = setInterval(() => { ... }, 15);

• setInterval 함수를 사용하여 일정 시간 간격으로 함수를 반복 실행합니다. 이 경우 15ms마다 함수가 실행됩니다.

 

if (window.scrollY === 0) { ... }

• 현재 스크롤 위치가 0인지를 확인합니다. 0인 경우는 페이지 상단에 도달한 경우입니다.

 

clearInterval(scrollInterval);

• 스크롤 위치가 0일 때 setInterval을 종료하여 애니메이션을 멈춥니다.

 

window.scrollBy(0, scrollStep);

• 스크롤 위치가 0이 아니면, scrollStep만큼 페이지를 스크롤합니다. scrollStep이 음수이므로 페이지가 위로 스크롤됩니다.

 

setInterval을 사용하여 스크롤 속도와 정확한 위치를 조절하고 페이지가 상단으로 이동하는 애니메이션 함수입니다.
scrollTo 스크롤 이벤트 원인은 아직도 모르겠지만 다음에도 저런 버그가 생기면 빠르게 대처 가능할 것 같습니다.