[Javascript] 메뉴 클릭시 네비게이션 높이만큼 띄우고 섹션으로 이동하기

네비게이션 메뉴를 눌렀을 때, 원하는 섹션으로 단순하게 이동하는 것은 간단하다.

a 태그의 link 에 해당 섹션의 id 값을 넣는 것이다.

 

하지만 이렇게만 해주면 네비게이션을 fixed로 위치시켜준 경우

해당 섹션으로 갔을 때 네비게이션 높이만큼 섹션이 가려진다는 단점이 있다.

그 단점을 해결하기 위해 Javascript 를 이용하여 코드를 짜보았다.

 

---

 

Javascript 코드

 

// 1. 네비게이션 메뉴들을 querySelectorAll을 통해 변수에 담는다.
const gnbItems = document.querySelectorAll(".gnb__item");
// 2. 섹션들을 전부 querySelectorAll을 통해 변수에 담는다.
const sections = document.querySelectorAll("section");

// 3. forEach 문을 통해 한번씩 순회한다.
// 이때 index도 같이 가져온다.
gnbItems.forEach((gnbItem, index) => {

  //4. 네비게이션 메뉴에 클릭 이벤트를 준다.
  gnbItem.addEventListener("click", (e) => {
    // 5. 메뉴를 a 태그에 만들었기 때문에, 
    // 태그의 기본 동작(링크 연결) 방지를 위해 preventDefault를 추가한다.
    e.preventDefault();
    
    // 6. 섹션들 중 네비게이션 메뉴의 index 에 해당하는 섹션의 높이값을 구하고,
    // 네비게이션 높이만큼 값을 빼준다.
    const sectionTop = sections[index].offsetTop - 40;
    
    // 7. 해당 위치로 스크롤을 이동시킨다.
    window.scroll({ top: sectionTop });
  });
});

 

 

결과물

See the Pen Untitled by Happy Hee (@8happyhee) on CodePen.

 

 

예전에 jQuery로만 짜봤던 걸 순수하게 Javascript 로만 짜보니 재밌었다!

혹시나 더 좋은 코드가 있다면 추후 수정해야지.

 

- 끝 -