[JavaScript / jQuery] 메뉴 클릭시 해당 영역으로 이동하기, a링크 / hash / animate / scrollTop / offset.top

*원페이지에서 메뉴를 클릭하면 해당 영역으로 스크롤되어 이동하는 코드

 

- a링크의 hash를 이용하여 이동

- hash는 페이지의 내부 링크를 목적으로 사용 (id를 지정하지 않는 경우, 클릭시 페이지의 최상단으로 이동)

 

 

//클릭할 메뉴

<nav>
	<ul>
    	<li><a href="#menu1">메뉴1</a></li>
        <li><a href="#menu2">메뉴2</a></li>
        <li><a href="#menu3">메뉴3</a></li>
        <li><a href="#menu4">메뉴4</a></li>
    </ul>
</nav>

 

//이동할 영역

<div id="#menu1">메뉴1</div>
<div id="#menu2">메뉴2</div>
<div id="#menu3">메뉴3</div>
<div id="#menu4">메뉴4</div>

 

//메뉴 클릭시 해당 영역으로 이동하는 jQuery

$(function () {
	$('li > a').click(function (){
    	$('html, body').animate({scrollTop: $(this.hash).offset.top}, 300);
    });
});

 

>>

메뉴를 클릭하면 html, body의 scrollTop(스크롤바의 수직 위치값)이

$(this.hash) -> (클릭한 해당 a링크의 hash값, 즉 이동할 div#menu를 의미)

의 top 좌표로 이동함