모바일웹에서 메뉴 스크롤 생길 경우 클릭한 위치로 이동

하이브리드앱이나 모바일웹에서 메뉴가 많아서 가로스크롤이 생길 경우가 있는데 그럴때 끝에 있는 메뉴를 클릭하면 그 메뉴로 위치를 이동시키는 방법

 

<div class="tab_box">
	<ul class="tab_list">
		<li><a href="<?php echo G5_THEME_URL ?>/mobile/shop/01/schedule_info.php?sc_idx=<? echo $sc_idx; ?>" <? echo $pn == "schedule_info" ? "class='active'":""; ?> >INFO</a></li>
		<li><a href="<?php echo G5_THEME_URL ?>/mobile/shop/01/schedule_story.php?sc_idx=<? echo $sc_idx; ?>" <? echo $pn == "schedule_story" ? "class='active'":""; ?> >STORY</a></li>
		<li><a href="<?php echo G5_THEME_URL ?>/mobile/shop/01/schedule_course.php?sc_idx=<? echo $sc_idx; ?>" <? echo $pn == "schedule_course" ? "class='active'":""; ?> >COURSE</a></li>
		<li><a href="<?php echo G5_THEME_URL ?>/mobile/shop/01/schedule_gift.php?sc_idx=<? echo $sc_idx; ?>" <? echo $pn == "schedule_gift" ? "class='active'":""; ?> >GIFT</a></li>
		<li><a href="<?php echo G5_THEME_URL ?>/mobile/shop/01/schedule_preview.php?sc_idx=<? echo $sc_idx; ?>" <? echo $pn == "schedule_preview" ? "class='active'":""; ?> >PREVIEW</a></li>
		<li><a href="<?php echo G5_THEME_URL ?>/mobile/shop/01/schedule_photo.php?sc_idx=<? echo $sc_idx; ?>" <? echo $pn == "schedule_photo" ? "class='active'":""; ?> >PHOTO</a></li>
		<li><a href="<?php echo G5_THEME_URL ?>/mobile/shop/01/schedule_tip.php?sc_idx=<? echo $sc_idx; ?>" <? echo $pn == "schedule_tip" ? "class='active'":""; ?> >TIP</a></li>
	</ul>
</div>
<script>
	$(function() {

		var tab_idx = 0;
		$('.tab_list li>a').each(function(index){
			if($(this).hasClass("active"))
				tab_idx = index;
		});

		var tab_left = $('.tab_list li').eq(tab_idx).offset().left;
		$('.tab_box').scrollLeft(tab_left);


	});
</script>