[CSS] 자연스럽게 특정 위치로 scroll하기

 

처음에 web page를 공부하면서, 감탄했던 기능이 있었다.

그건 바로 화면을 보고 있다가 버튼을 누르면 자연스럽게 특정 위치로 이동하는 것이었다. 

 

이렇게 페이지 내에 특정 위치로 한번에 이동하는 것은 a tag를 사용해서 쉽게 구현할 수 있다.

예를 들어, 맨위로 이동하게 하려면 <a href="#top">top</a> 이런 식으로 해두면 맨위로 가기는 하는데 너무 빠르게 간다.

 

그래서 위로 가는 것을 조금 느리게 하려고 하는데 구현 방법이 생각보다 쉬웠다.

난 자바스크립트를 사용해서 구현할 수 있을 줄 알았는데 그냥 css로도 할 수 있었다.

 

html {
    scroll-behavior: smooth;
}

css에다가 이런 코드를 적어주면 자연스럽게 동작한다.

 

 

근데 주의해야 할 점은 자연스럽게 scroll이 되게하려면 root element에 scroll-behavior를 적용시켜야 한다는 점이다.

그래서 body에 이 option을 적용하면 작동하지 않는다.

 

또, 사용자가 직접 scroll하는 것에는 scroll behavior이 작용하지 않는다.

 

더 자세한 내용은 아래 링크에서 직접 확인하시길!

scroll-behavior - CSS: Cascading Style Sheets | MDN