13.10.3 부드러운 이동 애니메이션 효과 구현하기
이번에는 헤더 영역의 메뉴를 클릭하면 메뉴 영역으로 스크롤이 부드럽게 이동하는 효과를 자바스크립트로 작성해 보겠습니다.
Window 객체의 scrollTo() 메서드에서 behavior 속성을 사용하면 애니메이션 효과를 적용해 스크롤을 부드럽게 이동할 수 있습니다. 단, IE나 iOS 모바일에서는 제대로 동작하지 않습니다. 이 외의 웹 브라우저에서는 정상적으로 작동합니다.
일단 이동할 대상 요소를 가리키는 선택자(selector)를 매개변수에 전달받아 이동하려는 대상의 현재 위칫값을 구하는 코드를 작성합니다.
13/end/js/move.js
/* 애니메이션 스크롤 이동 */
const animationMove = function(selector){
// ① selector 매개변수로 이동할 대상 요소 노드 가져오기
const targetEl = document.querySelector(selector);
// ② 현재 웹 브라우저의 스크롤 정보(y 값)
const browserScrollY = window.pageYOffset;
// ③ 이동할 대상의 위치(y 값)
const targetScorllY = targetEl.getBoundingClientRect().top + browserScrollY;
// ④ 스크롤 이동
window.scrollTo({ top: targetScorllY, behavior: 'smooth' });
};