오늘의 정리
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. 설명
- navbar에 click event를더하고, event parameter의 target을 이용해 클릭한 list를 변수로 정의한다. – event.target;
- target의 dataset에 정해진 section의 이름으로 객체를 가져온다. – ex) service일 경우 const elem = document.querySelector(“#service”)로 작동
- elem.scrollIntoView() 함수를 이용해 해당 section으로 이동한다. 이때 {behavior: “smooth”}를 더하면 자연스럽게 이동 할 수 있음
이 포스팅은 독학으로 배우고 정리하는거라 정석은 아닙니다.
혹시 더 효율적인 방법이 있다면 댓글로 알려주시면 감사하겠습니다!:)