button 태그에 data-* 속성으로 animation-scroll과 target 속성을 지정합니다. 그리고 자바스크립트로 다음과 같이 클릭 이벤트를 연결하면 button 태그를 클릭했을 때 해당 영역으로 스크롤이 부드럽게 이동하는 것을 확인할 수 있습니다.
13/end/js/move.js
// 스크롤 이벤트 연결하기
const scollMoveEl = document.querySelectorAll("[data-animation-scroll='true']");
for(let i = 0; i < scollMoveEl.length; i++){
scollMoveEl[i].addEventListener('click', function(e){
const target = this.dataset.target;
animationMove(target);
});
}
이제 최종 프로젝트의 HTML 파일을 웹 브라우저로 열어보세요. 타이핑 효과, 헤더 클래스 추가와 삭제 효과, 부드러운 이동 애니메이션 효과(behavior 속성이 작동되는 웹 브라우저에서만)가 전부 잘 적용된 상태로 실행됩니다.