이야기앱 세상
jQuery - div에 overflow:auto 로 지정했을 때 div의 하위 div로 스크롤 위치를 변경하기 본문
div에 overflow:auto 로 지정했을 때 div의 하위 div로 스크롤 위치를 변경하기
div에 스크롤이 생기고 div의 하위 div로 스크롤의 위치를 변경하게 하기 위해서 아래와 같이 우선 div에 overflow:auto 스타일을 적용한다.
[style 부분]
<style type="text/css">
div#main{
overflow:auto;
width:150px;
height:800px;
}
div#main div{
width:100px;
height:100px;
border:1px solid black;
}
span{
cursor: pointer;
padding:10px;
}
</style>
<script 부분>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('span').click(function(){
//span 태그를 클릭하면 span 태그에 표시된 번호를 읽어와서 div의 id와 일치하면 해당 div에 접근해서 data-num 값을 읽어와서 scrollTop에 할당한다.
var span = $(this).text();
$('#main').animate({scrollTop:$('#'+span).attr('data-num'),duration:400});
});
});
</script>
<html 부분>
<div>
<span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span>
</div>
<div id="main">
<!-- div의 높이가 100px이기 때문에 data-num의 값을 100씩 증가시켜서 명시한다. -->
<div id="1" data-num="0">1</div>
<div id="2" data-num="100">2</div>
<div id="3" data-num="200">3</div>
<div id="4" data-num="300">4</div>
<div id="5" data-num="400">5</div>
<div id="6" data-num="500">6</div>
<div id="7" data-num="600">7</div>
<div id="8" data-num="700">8</div>
<div id="9" data-num="800">9</div>
<div id="10" data-num="900">10</div>
<div id="11" data-num="1000">11</div>
<div id="12" data-num="1100">12</div>
</div>
[실행 화면]
3을 클릭하면 3번이라고 명시된 div로 스크롤이 옮겨짐
'IT > jQuery' 카테고리의 다른 글
| jQueryUI의 datepicker를 이용한 시작일, 종료일 지정하기 (0) | 2021.09.13 |
|---|---|
| jquery를 이용한 checkbox 전체 선택 해제하기 (0) | 2021.01.19 |
| jQuery - 페이지 내의 특정 위치로 스크롤을 이동시키기 (5) | 2018.12.26 |
| jQuery - ajax 통신이 성공했을 때 팝업창(새창) 띄우기 오류 (0) | 2018.12.24 |
| jQuery - 스크롤시 메뉴는 고정되고 내용은 스크롤되도록 처리하기 (0) | 2018.12.24 |
