[Jquery] SCROLL 메뉴

<nav id="nav">
	<ul>
		<li class="on">
			<a href="#section1"><span>Intro</span></a>
		</li>
		<li><a href="#section2"><span>Skill</span></a></li>
		<li><a href="#section3"><span>Coding</span></a></li>
		<li><a href="#section4"><span>Design</span></a></li>
		<li><a href="#section5"><span>About</span></a></li>
		<li><a href="#section6"><span>Contact</span></a></li>
	</ul>
</nav>

#nav {
overflow: hidden; 
position: fixed; left: 0; top:0; 
width:100%; height: 56px;
background : rgba(255,255, 255, 0.5);
}

var nav = $("#nav ul li"); //버튼을 변수에 할당
var contents = $("#contents > div"); //컨텐츠를 변수에 할당
nav.click(function(){ //버튼을 클릭했을 때 이벤트 함수를 설정
	var target = $(this); //6개의 버튼 타겟을 변수에 할당시킴
	var index = target.index(); //6개의 버튼에 인덱스 할당
	// alert(index);
	var section = contents.eq(index); //6개의 컨텐츠를 변수에 할당
	var offset = section.offset().top; //6개의 컨텐츠 offset값을 변수에 할당
	
	$("html, body").animate({scrollTop:offset}, 400,);
});

메뉴 버튼을 클릭하면 웹 페이지가 애니메이션과 함께 스크롤됩니다.