Navbar Scroll

Navbar Scroll

메뉴를 클릭하면 해당 섹션에 스크롤이 되게 만들어보자.
클릭하면 해당 섹션위치로 스크롤이 되야한다.

• data-link를 사용하여 섹션별 아이디값을 넣어준다.
• scrollIntoView(link)를 이용하여 이동한다.

//index.html
<nav id="navbar">
      <div class="navbar__logo">
        <a href="#">로고</a>
      </div>
      
        <ul class="navbar__menu">
          <li class="navbar__menu__items active" data-link='#home'>Home</li>
          <li class="navbar__menu__items" data-link='#about'>About</li>
          <li class="navbar__menu__items" data-link='#work'>My work</li>
          <li class="navbar__menu__items" data-link='#testimonial'>Testimonial</li>
        </ul>
      
    </nav>

• navbar의 메뉴별 data-link생성 : section별 지정한 id값을 넣는다.

 <aside>
      <button class="aside__top"><i class="fa-solid fa-circle-arrow-up"></i></button>
      <button class="aside__bottom"><i class="fa-solid fa-circle-arrow-down"></i></button>
    </aside>

• aside 버튼 생성

const navbarMenu = document.querySelector(".navbar__menu");

navbarMenu.addEventListener("click", (e) => {
  //console.log(e.target.dataset.link);
  const link = e.target.dataset.link;

  if (link == null) {
    return;
  }
  scrollIntoView(link);
});

//aside top & bottom scroll
const asideTopBtn = document.querySelector(".aside__top");
asideTopBtn.addEventListener("click", () => {
  scrollIntoView("#home");
});

const asideBottomBtn = document.querySelector(".aside__bottom");
asideBottomBtn.addEventListener("click", () => {
  scrollIntoView("#contact");
});


// 중복코드시 함수로 만들어서 사용
function scrollIntoView(selector) {
  const scrollTo = document.querySelector(selector);
  scrollTo.scrollIntoView({ behavior: "smooth" });
}

• e.target.dataset.link를 콘솔에서 확인해보면 해당 태그의 data-link가 확인된다.
• link를 e.target.dataset.link으로 넣어주고 if문으로 link가 있을때 link로 스크롤이 되도록 scrollIntoView(link)로 만들어준다.
• aside는 top일때 첫번째 섹션으로 bottom일때 마지막 섹션(푸터)로 스크롤되게 지정