JS적용 웹페이지 만들어보기 (2)

kh0520·2022년 6월 20일

1)학습내용

header부분 스크롤이 자연스럽게 이동하기

/* 애니메이션 스크롤 이동 */
const animationMove = function(selector){
    // selector 매개변수로 이동할 대상 요소 노드 가져오기
    const targetEl = document.querySelector(selector);
    //  현재 웹 브라우저의 스크롤 정보(y 값)
    const browserScrollY = window.pageYOffset;
    // 이동할 대상의 위치(y 값) 
    const targetScorllY = targetEl.getBoundingClientRect().top + browserScrollY;
    //  스크롤 이동 https://salgum1114.github.io/css/2019-04-28-scroll-behavior-smooth/
    window.scrollTo({ top: targetScorllY, behavior: 'smooth' });
  };

일단 이동할 대상 요소를 가리키는 선택자(selector)를 매개변수에 전달받아 이동하려는 대상의 현재 위칫값을 구하는 코드를 작성

getBoundingClientRect(): 윈도우(window)룰 기준으로 특정 엘리먼트의 위치 값을 구하는 방법 참조:
https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect
https://salgum1114.github.io/css/2019-04-28-scroll-behavior-smooth/
스크롤 이벤트 연결하기

기존 헤더 영역에서 메뉴에 해당하는 button 태그에 클릭 이벤트를 연결해 앞에서 만든 animationMove() 함수를 실행.
헤더 영역의 메뉴에 사용된 button 태그에 click 이벤트를 연결하기 위해 다음처럼 코드를 수정합니다.

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);
  });
}

참조:
https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset