스크롤 최상단으로 이동 css vs js

스크롤 최상단으로 이동하는 방법에 css와 js가 있습니다.

 

<div class="bar">
  <a href="#">스크롤 최상단 css</a>
  <a href="#" id="js-scroll">스크롤 최상단 JS</a>
</div>

css

html {
  scroll-behavior: smooth;
}

위 처럼 스크롤 상태에 대한 smooth 속성을 사용해서 scroll을 부드럽게 처리할 수 있기 때문에 #인 포지션인 0으로 갈 때 부드럽게 이동합니다.

js

document.querySelector("#js-scroll").addEventListener("click", (e) => {
  e.preventDefault();
  window.scroll({
    top: 0,
    left: 0,
    behavior: "smooth"
  });
});

위의 방법도 스크롤을 부드럽게 처리하기 위한 옵션이 들어갑니다.

 

이 두가지 방법은 중요한 차이가 있습니다.

 

차이점	CSS	JS
Chrome	통제가능 (스피드:천천히)	통제 불가능
FireFox	통제가능 (스피드:매우빠르게)	통제가능(스피드:빠르게)
Safari	스무스 스크롤링 안됨	스무스 스크롤링 안됨
Edge	통제가능(스피드:빠르게)	통제 불가능
iOS	스무스 스크롤링 안됨	스무스 스크롤링 안됨

• CSS 또는 Javascript를 통해 트리거되는 부드러운 스크롤 동작을 취소할 수 있습니다.
• 속도를 제어 할 수 있도록하거나 그렇지 않은 경우 브라우저가 중간 속도를 유지할 수 있도록 하세요.