탭 스크롤 이동 > 학습

탭 버튼 클릭시 해당 아이디 값을 가진 객체로 스크롤 되는 소스입니다.

<style>
  .step{height: 400px; font-size: 40px; font-weight: bold; text-align: center; line-height: 400px;}
</style>

<ul class="tab">
  <li data-tabid="#step01">Tab-1</li>
  <li data-tabid="#step02">Tab-2</li>
  <li data-tabid="#step03">Tab-3</li>
  <li data-tabid="#step04">Tab-4</li>
</ul>
<div class="contents">
  <div id="step01" class="step">#step01</div>
  <div id="step02" class="step">#step02</div>
  <div id="step03" class="step">#step03</div>
  <div id="step04" class="step">#step04</div>
</div>

<script>
$(document).ready(function(){
	var tabId,
		  scrollPosition;

	$(".tab > li").click(function(){
		tabId = $(this).data("tabid"),
		scrollPosition = $(tabId).offset();
		$("html, body").animate({
			scrollTop: scrollPosition.top
		}, 300);
	});
});
</script>