jQuery 제이쿼리 버튼 클릭 시 원하는 구간으로 이동하기

많은 홈페이지에서 퀵메뉴나 top버튼을 눌러 원하는 곳까지 이동 하는 UI를 본 적이 있을 것이다.

나는 이것을 약간 리모컨의 역할과 같다고 본다.

요즘 같이 페이지의 길이가 길어지는 경우 다시 위로 올라기가 귀찮다.

그래서 이러한 UI가 생겨난 것 같다.

이러한 리모컨과 같은 UI를 앵커 버튼, 내비게이터 버튼 등 많은 이름으로 불리고 있다.

필자는 앵커 버튼이라 하겠다.

설명이 길다.

위와 같은 버튼의 코드를 바로 적어보겠다.

function goAnchor(tg) {
	jQuery('html,body').animate({scrollTop: $(tg).offset().top+0}, 'fast');
	return false;
}

끝이다.

goAnchor()의 인자인 tg에 원하는 구간의 class 이름을 넣으면 된다.

그러면 그 class 이름의 최상단에 딱 맞게 이동을 한다.

상단으로 이동을 하는 이유는 .offset().top 때문이다.

다음은 html의 a태그로 한 예시이다.

<a href="javascript:;" onclick="goAnchor('.section01');return false;">section01상단으로 가기</a>

이걸로 좌측에 퀵메뉴 버튼을 만들어서 페이지 길이가 길어지면 사용자가 편리하게 페이지를 이동을 할 수 있도록 해주면 좋을 듯 하다.

자 이제 복붙으로 만들어보시라.