개요

스크롤 애니메이션을 구현하고 나서 보니 하단에서 할 수 있을 만한게 없다.
그래서 상단으로 올려야해서 로고를 버튼처럼 만들고 상단까지 끌어올리도록 만들었다.

방법

window.scrollTo({ top: 0, behavior: 'smooth' });

또는

window.scrollTo({ top: 0, behavior: 'auto' });

를 이용하면 된다.

mdn설명에서는

smooth: 스크롤이 부드럽게 움직입니다.
instant: 스크롤이 단번에 즉시 적용됩니다.
auto: 스크롤 동작은 계산된 scroll-behavior 값에 의해 결정됩니다

이렇게 설명되었는데, react에서 막상 해보니 instant가 적용되지 않았다. 흠 나만 안된건가?

그래서 react에서 적용은 다음처럼 했다.

<div onClick(() => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
})>
  <span>할루?</span>
</div>

어쨌든 이렇게 하면 된다. 굳