[JavaScript] 메뉴 클릭 시 원하는 페이지로 스크롤 이동하기

UI 동작을 위해 생각해 봐야 할 것

 

1. <a> 링크의 기본 동작을 막아야함
2. 화면을 스무스하게 이동 시켜야함
3. 이동을 원하는 각 섹션의 위치를 담아 둬야함

HTML 구조

 

    <ul class="nav-bar">
        <li><a href='#view01'>1</a></li>
        <li><a href='#view02'>2</a></li>
        <li><a href='#view03'>3</a></li>
        <li><a href='#view04'>4</a></li>
    </ul>
    <div id="view01" class="screen sc-01"></div>
    <div id="view02" class="screen sc-02"></div>
    <div id="view03" class="screen sc-03"></div>
    <div id="view04" class="screen sc-04"></div>

 

 

[STEP 01] <a> 링크 기본 동작 막기

자바스크립트에서 기본 동작을 막을 수 있는 'e.preventDefault' 매소드를 사용

 

$('.nav-bar li a').on('click', function(e){
    e.preventDefault(); // 링크 클릭의 기본 동작을 중단
})

 

선택자를 $('. nav-bar li')가 아닌 $('.nav-bar li a')로 직접적으로 한 이유는 hash 함수를 사용 하기 위해서임

 

[STEP 02] hash() 함수로 해당 값 담아두기

 

$('.nav-bar li a').on('click', function(e){
    e.preventDefault(); // 링크 클릭의 기본 동작을 중단

    var hash = this.hash; // a링크 href 값 반환
    console.log(hash);
})

 

 

출력을 해보면 nav-bar 1번은 #view01,  2번은 #view02 값이 반환됨

 

[STEP 03] 각 섹션의 떨어진 거리 구하기

offset(). top를 사용해서 각각의 섹션의 거리를 알아낼 수 있음

전에 담아둔 변수 hash를 사용하여 거리를 계산

 

$('.nav-bar li a').on('click', function(e){
    e.preventDefault(); // 링크 클릭의 기본 동작을 중단

    var hash = this.hash; // a링크 href 값 반환
    var viewNum = $(hash).offset().top; // 섹션 거리 저장 변수

})

 

위와 같이 코드를 작성하면 <nav>의 요소를 클릭할 때마다 해당 섹션의 거리가 나오는 걸 알 수 있음

 

- 첫 번째를 클릭하면 viewNum은 $('#view01').offset().top;이 할당됨

- 두 번째를 클릭하면viewNum은 $('#view02').offset().top;이 할당됨

- 세 번째를 클릭하면 viewNum은 $('#view03').offset().top;이 할당됨

- 네 번째를 클릭하면viewNum은 $('#view04'). offset(). top;이 할당됨

 

[STEP 04] 스크롤 애니메이션 추가 (최종 구현)

$('.nav-bar li a').on('click', function(e){
    e.preventDefault(); // 링크 클릭의 기본 동작을 중단

    var hash = this.hash; // a링크 href 값 반환
    var viewNum = $(hash).offset().top; // 섹션 거리 저장 변수
    
    $('html').animate({
        scrollTop: viewNum
    }, 1000)
})

 

이처럼 코드를 작성하면 의도한 대로 잘 동작함