[ JQUERY ] 탭 스크롤 이동
작성일 20-03-30 12:54
페이지 정보
작성자IPFT 조회 240회 댓글 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>
댓글목록
등록된 댓글이 없습니다.