페이지 내에서 앵커 링크 사이를 이동하는 경우, 부드러운 효과를 위해서 스크롤 기능을 넣곤 합니다. jQuery를 이용하거나 javaScript로 구현하던지
그런데, 사실 가능하다면 "개발자의 편의"를 위해서 native 한 기능으로 들어가는 게 가장 좋습니다. 핵심 기술이 아닌 animation 류의 효과를 위해서 직접 뭔가를 해주는 건 사실 좀 피곤한 일이거든요. 대부분의 경우 라이브러리가 있긴 하지만, 라이브러리가 자꾸 섞이는 것도 좀 그렇죠?
이번 글에서는 별다른 설정 없이 CSS로만 앵커 링크 사이를 부드럽게 이동하는 방법에 대해서 살펴보겠습니다.
script로 구현
저는 서울시청 사이트 프로젝트에서탑 버튼을 클릭했을때 위로 가는 동작을 아래 처럼 스크립트로 구현했습니다.
$(".fix-btn-top").click(function(){
$("html, body").animate({scrollTop : 0}, 500);
return false;
});
CSS로 구현
CSS만으로 가능하다면 이전의 방식보다 훨씬 쉽고 간단하겠죠? 최근 CSS에서는 scroll-behavior:smooth; 속성이 추가되면서 페이지 내의 앵커 링크들 사이에 부드럽게 스크롤되는 애니메이션을 구현할 수 있게 되었습니다.
이 속성은 html에 추가하면 동작합니다.
하지만 이 속성의 단점은 이동 속도는 따로 설정이 불가능 하다는 점입니다.
커스텀을 원한다면 스크립트를 이용하는것이 좋겠죠? 🙂
