Github avatar

GyeongSu Han's Github Pages

CSS scrolling animation

Mar 06, 2019 · Web

javascript에서 jQuery를 사용하지 않고, window.scroll을 사용해 스크롤위치를 변경시킬 때 애니메이션을 추가하고 싶었다.

scroll-behavior: smooth;의 경우는 다음과 같이 지원하지 않는 브라우저가 많았다.

이를 해결할 smoothscroll-polyfill모듈이 있어 이를 사용하기로 했다.

사용법은 다음과 같다.

import smoothscroll from 'smoothscroll-polyfill';

// kick off the polyfill!
smoothscroll.polyfill();

사용하기 전에 선언을 해준다.

그 후, 사용할 window.scroll을 다음과 같이 수정해준다.

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