[javascript] 네비게이션 기능 구현하기

 

네비게이션

메뉴 버튼 클릭 시 선택된 영역으로 스크롤 되면서 이동되는 내비게이션 기능

내비게이션 기능을 구현하기 위해서는 다음 6가지 요소가 어떠한 기능을 담당하는지 숙지해야 합니다.

• querySelector: 1개의 태그를 css 선택자를 기반으로 가져옵니다.
• querySelectorAll: 여러 개의 태그를 css 선택자를 기반으로 가져옵니다.
• preventDefault() : 현재 이벤트의 기본 동작을 중지시킬 때 사용됩니다.
• getAttribute : HTML 태그의 속성값을 가져올 때 사용합니다.
• window.scrollTo({}) : 원하는 위치로 스크롤 이동을 시킬 때 사용됩니다.
• offsetTop : 선택된 영역의 상단까지의 거리를 절대 좌표로 반환합니다.

 

// 1) Scroll Navigation

// <header> 내에 있는 <a> 가져옴
var aTags = document.querySelectorAll("header a");


for(var i = 0; i < aTags.length; i ++) {
    aTags[i].onclick = function(e) {
    	
        // 해당 태크의 본래기능을 정지시킴
        e.preventDefault();
        
        // href 속성을 가져온 다음, 그 href에 해당하는 id를 갖는 객체를 가져온다.
        var target = document.querySelector(this.getAttribute("href"));

        // 원하는 위치로 스크롤되도록 지정한다. 
        // top: 스크롤 이후 최상단에 어떤 좌표가 오게 되는지 
        window.scrollTo({
            'behavior': 'smooth',
            'top': target.offsetTop
        })
    }
}