ScrollIntoView() : Navigation 클릭하면 해당 Section으로 이동

오늘의 정리

1. Navigation을 클릭하면 해당 Section으로 부드럽게 이동하는 기능 구현

2. Coding

HTML (먼저 HTML에서 Navigation에 dataset을 이용해 이동할 section name을 넣어놓는다.)

<ul class="nav__menu">
       <li class="nav__item" data-link="#home">About</li>
        <li class="nav__item" data-link="#service">Service</li>
        <li class="nav__item" data-link="#skills">Skills</li>
        <li class="nav__item" data-link="#team">Team</li>
</ul>

JS

nav__menu.addEventListener("click", (event) => {
    const target = event.target;
    const link = target.dataset.link;
    const elem = document.querySelector(link);
    elem.scrollIntoView({ behavior: "smooth" });
});

3. 설명

1. navbar에 click event를더하고, event parameter의 target을 이용해 클릭한 list를 변수로 정의한다. – event.target;
2. target의 dataset에 정해진 section의 이름으로 객체를 가져온다. – ex) service일 경우 const elem = document.querySelector(“#service”)로 작동
3. elem.scrollIntoView() 함수를 이용해 해당 section으로 이동한다. 이때 {behavior: “smooth”}를 더하면 자연스럽게 이동 할 수 있음

이 포스팅은 독학으로 배우고 정리하는거라 정석은 아닙니다.

혹시 더 효율적인 방법이 있다면 댓글로 알려주시면 감사하겠습니다!:)