[jQuery] 탭 메뉴 클릭 시 scroll event

탭 메뉴에 data-name 값을 각각 부여하고 이동할 섹션에는 ID값으로 같은 값을 부여한 뒤

 

탭 클릭 시 해당하는 섹션으로 스크롤 이동하도록 구현

 

 

 

HTML

<!-- tab -->
<ul class="tab_menu">
    <li><a href="#n" data-name="sec_01">menu1</a></li>
    <li><a href="#n" data-name="sec_02">menu2</a></li>
    <li><a href="#n" data-name="sec_03">menu3</a></li>
</ul>


<!-- contents -->
<section id="sec_01">
	<!-- section 1 contents -->
</section>

<section id="sec_02">
	<!-- section 2 contents -->
</section>

<section id="sec_03">
	<!-- section 3 contents -->
</section>

 

 

 

jQuery

$('.tab_menu li a').on('click', function(){
    var targetId = $(this).data('name'),
        targetSec = $('#' + targetId).offset().top;
    $('html').animate({
        scrollTop : targetSec
    }, '2000');
    return false;
})