jQuery - p 태그로 구분되어진 문단을 버튼으로 스크롤하기

2022. 4. 12. 11:36

▶ 버튼으로 스크롤 하기

💻 예제 설명

4개의 p 태그로 구성된 글자 문단의 개수에 맞게 버튼을 생성하여 붙여 넣고 해당 버튼을 클릭하면

클릭한 버튼의 문단으로 스크롤하는 예제이다.

🖥 소스 예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
	<style type="text/css">
		html,body{
			margin: 0px;
		}

	    #txt-box {
		    width:300px;
		    padding:10px;
		    height:530px;
		    border:1px solid black;
		    overflow:auto;
		    position:relative;
	    }
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			var nParagraph = $('p').length; // p 태그로 구성되어진 문단의 개수
			var strButtonTag = ''; // 버튼 태그를 
			var $tBox = $('#txt-box');

			for(var i = 0; i<nParagraph; i++){ // 문단의 개수를 가지고 루프를 돌려 개수만큼 버튼 태그를 변수에 저장.
				strButtonTag += '<input type="button" class="EachButton" id="button-'+(i+1)+'" value="'+(i+1)+'번째 문단으로 스크롤" />'
			}

			$('.button-grp').append(strButtonTag); // 버튼 태그를 붙인다.

			$('.button-grp .EachButton').click(function(e) {
				var nTargetBtn = Number(e.target.id.split('-')[1]); // 클릭한 버튼
			    var selectParagraphBox = $('#txt-box p:eq('+(nTargetBtn-1)+')').position(); // 클릭한 버튼에 해당하는 문단의 포지션값 (세로 위치 값)
			    var scrollPosition = $tBox.scrollTop() + selectParagraphBox.top; // txt-box 태그의 Top 의 위치값 + 클릭한 버튼에 해당하는 문단의 포지션값 (세로 위치 값)
			    $tBox.animate({scrollTop: scrollPosition}, 100); // 클릭한 버튼에 해당하는 문단의 포지션값을 txt-box 태그의 최상단에 scrollTop 을 한다.
			}).css({'padding':'5px', 'margin':'5px'});
		});
	</script>	
</head>

<body>
	<div id="content">

		<div class="button-grp">
			<!-- 버튼 태그를 붙이는 곳 -->
		</div>

		<div id="txt-box">
			<p>
				첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.첫번째 문단 입니다.
			</p>
			<p>
				두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.두번째 문단 입니다.
			</p>

			<p>
				세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.세번째 문단 입니다.
			</p>

			<p>
				네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.네번째 문단 입니다.
			</p>
	    </div>
	</div>
</body>
</html>

💻 예제 구동 설명

상단의 버튼을 클릭하면 txt-box 태그 안에 들어가져 있는 p 태그의 문단들이 txt-box 태그의 최상단에 스크롤되는 예제인데,

var nParagraph = $('p').length;
var strButtonTag = '';
var $tBox = $('#txt-box');

nParagraph 변수는 p 태그가 총 몇 개인지 저장하는 변수

strButtonTag 변수는 버튼태그를 이 변수에다가 p 태그의 문단 개수만큼 만들어서 저장할 변수

$tBox 변수는 txt-box 태그의 jQuery 객체가 담긴 변수

for(var i = 0; i<nParagraph; i++){ 
    strButtonTag += '<input type="button" class="EachButton" id="button-'+(i+1)+'" value="'+(i+1)+'번째 문단으로 스크롤" />'
}

nParagraph의

$('.button-grp').append(strButtonTag);

for 루프문이 다 돌아서 최종적으로 strButtonTag에 모든 버튼 태그를 button-grp라는 div 태그 안에다가 붙여 넣기 하는 코드.

$('.button-grp .EachButton').click(function(e) {
    var nTargetBtn = Number(e.target.id.split('-')[1]);
    var selectParagraphBox = $('#txt-box p:eq('+(nTargetBtn-1)+')').position();
    var scrollPosition = $tBox.scrollTop() + selectParagraphBox.top;
    $tBox.animate({scrollTop: scrollPosition}, 100);
}).css({'padding':'5px', 'margin':'5px'});

append 메서드로 버튼을 붙인 후에 그 안에 각각의 버튼들에게 click 이벤트를 등록하는 코드인데,

안에 자세히 잘 살펴보면

var nTargetBtn = Number(e.target.id.split('-')[1]);

해당 클릭된 버튼의 id 값을 split 하여 해당 id의 번호만 잘라서 nTargetBtn 이라는 변수에 담는다.

var selectParagraphBox = $('#txt-box p:eq('+(nTargetBtn-1)+')').position();

클릭한 버튼에 해당하는 문단의 포지션 값이 담긴 객체를 selectParagraphBox 이 변수에 담는다.

var scrollPosition = $tBox.scrollTop() + selectParagraphBox.top;

txt-box 태그의 scollTop()의 위치에 selectParagraphBox.top의 문단 위치 값(top)을 scollPosition 변수에 담는다.

$tBox.animate({scrollTop: scrollPosition}, 100);

txt-box 태그의 scollTop 위치에 scrollPosition 위치를 100 속도로(1000 이면 1초) 스크롤링한다.

이렇게 각 버튼을 클릭을 하게 되면 그 버튼의 해당하는 p 태그의 문단이 txt-box의 최상단에 스크롤링된다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - show() 메서드, 실행 후 다른 코드 실행 (callback) (0)	2022.05.10
jQuery - hide() 메서드, 실행 후 다른 코드 실행 (callback) (0)	2022.05.09
jQuery - offset() 메서드 사용법 (0)	2022.03.25
jQuery - position() 메서드 / 위치값은 어떻게 어떤 이유로 계산되어져 반환받는가 (0)	2022.03.24
jQuery - 태그요소의 width/height/innerWidth/innerHeight/outerWidth/outerHeight/ 완전 100% 이해 (0)	2022.03.23

열공의 기록