제이쿼리 플러그인을 사용하지 말고
제이쿼리로만 간단하게 책갈피 스무스 기능을 구현해 보자
1. 베이직한 구조
/* html 메뉴 영역 */
<button onclick="pageMove(1)">메뉴1</button>
<button onclick="pageMove(2)">메뉴2</button>
<button onclick="pageMove(3)">메뉴3</button>
<button onclick="pageMove(4)">메뉴4</button>
/* html 책갈피 영역 */
<div id="tg1">컨텐츠 영역1</div>
<div id="tg2">컨텐츠 영역2</div>
<div id="tg3">컨텐츠 영역3</div>
<div id="tg4">컨텐츠 영역4</div>
/* 스크립트 영역 */
function pageMove(p1){
var offset = $("#tg" + p1).offset();
$('html, body').animate({scrollTop : offset.top}, 1000);
}
2. 클래스 컨트롤 구조
/* html 탭메뉴 영역 */
<div class="js_pagemove_at">
<div class="tab-box">
<div class="tab" taget="1">
<span class="text">탭메뉴1</span>
</div>
<div class="tab" taget="2">
<span class="text">탭메뉴2</span>
</div>
<div class="tab" taget="3">
<span class="text">탭메뉴3</span>
</div>
<div class="tab" taget="4">
<span class="text">탭메뉴4</span>
</div>
</div>
</div>
/* html 책갈피 컨텐츠 영역 */
<div id="tg1">컨텐츠 영역1</div>
<div id="tg2">컨텐츠 영역2</div>
<div id="tg3">컨텐츠 영역3</div>
<div id="tg4">컨텐츠 영역4</div>
/* 스크립트 영역 */
var PgAt = $('.js_pagemove_at .tab');
PgAt.on('click',function() {
var TgVal = $(this).attr('taget');
var offset = $("#wg"+TgVal).offset();
$('html, body').animate({scrollTop:offset.top}, 1000);
});
※ 여기서 알아두면 좋을건 헤더메뉴가 공중에 떠 있는 경우 해강 값을 감안해서 이동값을 조정해 준다.
$('html, body').animate({scrollTop:offset.top}, 1000); <- id 값의 높이를 기중으로 이동을 시켜 주기 때문에
헤더 높이 값을 빼줘야 한다.
$('html, body').animate({scrollTop:offset.top-헤더높이값}, 1000);
별거도 아닌거에 제이쿼리 플러그인을 사용하는 분들을 위해 올려 봅니다.
실력이 없는 저의 생각에는 플러그인을 급할 경우 유용하지만 다양한 플러그인을 여러가지 사용하는 경우 충돌나면 문제를 해결하기 힘드니 이렇게 간단한건 그냥 제이쿼리로만 이용하시는 것이 좋습니다.