[jQuery 활용하기] 04. 프로젝트: 나만의 포트폴리오

포트폴리오 II: 섹션 스크롤

 

이제 메뉴의 색상은 잘 나오는데, 클릭하면 동작을 하지 않습니다.

네비게이션바의 'About' 메뉴를 클릭하면 'about' 섹션으로 스크롤하도록, 그리고 'Contact' 메뉴를 클릭하면 'contact' 섹션으로 스크롤하도록 코드를 작성해주세요.

스크롤은 1초 안에 부드럽게 움직여야 합니다.

 

---

function scrollHandler() {
    if ($(window).scrollTop() >= $('.about').position().top) {
        $('.menu-right button').css('color', '#4a4a4a');
    } else {
        $('.menu-right button').css('color', 'white')
    }
}

$(window).on('scroll', scrollHandler);

scrollHandler();

$('.menu-right button').on('click', function() {
   var id = $(this).attr('id');
   if (id == "about-btn") {
       $('html, body').animate({scrollTop: $('.about').position().top}, 1000);
   } else if (id == "contact-btn") {
       $('html, body').animate({scrollTop: $('.contact').position().top}, 1000);
   }
});

---

본 내용은 Codeit의  'jQuery' 강의를
참고하여 작성한 내용입니다.