탭 스크롤 이동 > 학습

본문 바로가기

사이트 내 전체검색

425,057명이 방문해 주셨습니다.

[  JQUERY  ] 탭 스크롤 이동

작성일 20-03-30 12:54

페이지 정보

작성자IPFT 조회 290회 댓글 0건

본문

탭 버튼 클릭시 해당 아이디 값을 가진 객체로 스크롤 되는 소스입니다.
<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>

댓글목록

등록된 댓글이 없습니다.

Copyright © 소유하신 도메인. All rights reserved.