jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jquery.toc

jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다.

기본 사용법

  • h 태그가 많은 HTML 문서를 만듭니다.
  • 다음 코드를 추가하여 jQuery와 jquery.toc.js를 연결합니다. 보통 </head> 위나 </body> 위에 넣습니다. jquery.toc.js의 경로는 적절히 수정하세요.
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.toc.js"></script>
  • 다음 코드를 추가합니다.
<script>
	$( document ).ready( function() {
		$( 'body' ).toc( {
			strip: false,
			stripAfter: 15,
			container: "#jb-toc",
			scrollSpeed: 300,
			scrollOffset: 50
		} );
	} );
</script>
  • 다음 코드를 추가하면, 그 자리에 차례가 만들어집니다.
<div id="jb-toc"></div>
  • 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style>
			body {
				font-family: Consolas, sans-serif;
			}
			a {
				color: blue;
			}
		</style>
		<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
		<script src="js/jquery.toc.js"></script>
		<script>
			$( document ).ready( function() {
				$( 'body' ).toc( {
					strip: false,
					stripAfter: 15,
					container: "#jb-toc",
					scrollSpeed: 300,
					scrollOffset: 10
				} );
			} );
		</script>
	</head>
	<body>
		<div id="jb-toc"></div>
		<h1>Lorem</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1>Ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h2>Dolor</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h3>Sit</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h4>Amet</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1>Consectetur</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h2>Adipiscing</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h2>Elit</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1>Nullam</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
	</body>
</html>

  • 차례를 클릭하면, 그 위치로 부드럽게 이동합니다.

차례 만드는 영역 지정하기

  • 특정 영역 안의 h 태그만 목차로 만들고 싶다면 적절한 id로 감쌉니다.
<div id="jb-toc-content">
	...
</div>
  • 스크립트에 id를 지정합니다.
<script>
	$( document ).ready( function() {
		$( '#jb-toc-content' ).toc( {
			strip: false,
			stripAfter: 15,
			container: "#jb-toc",
			scrollSpeed: 300,
			scrollOffset: 10
		} );
	} );
</script>
  • 전체 코드는 다음과 같습니다. id의 값이 jb-toc-content인 영역 안의 h 태그만 목차로 만들어집니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style>
			body {
				font-family: Consolas, sans-serif;
			}
			a {
				color: blue;
			}
		</style>
		<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
		<script src="js/jquery.toc.js"></script>
		<script>
			$( document ).ready( function() {
				$( '#jb-toc-content' ).toc( {
					strip: false,
					stripAfter: 15,
					container: "#jb-toc",
					scrollSpeed: 300,
					scrollOffset: 10
				} );
			} );
		</script>
	</head>
	<body>
		<div id="jb-toc"></div>
		<div id="jb-toc-content">
			<h1>Lorem</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
			<h1>Ipsum</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
			<h2>Dolor</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
			<h3>Sit</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
			<h4>Amet</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		</div>
		<h1>Consectetur</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h2>Adipiscing</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h2>Elit</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1>Nullam</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
	</body>
</html>

모양 꾸미기

  • 목차는 다음과 같이 만들어집니다. CSS로 모양을 꾸밀 수 있습니다.
<div id="jb-toc">
	<div class="toc_container">
		<ul class="toc">
			<li><a href="#hl_111" title="Lorem">Lorem</a></li>
			<li><a href="#hl_121" title="Ipsum">Ipsum</a></li>
			<li>
				<ul>
					<li><a href="#hl_132" title="Dolor">Dolor</a></li>
					<li>
						<ul>
							<li><a href="#hl_143" title="Sit">Sit</a></li>
							<li>
								<ul>
									<li><a href="#hl_154" title="Amet">Amet</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#hl_161" title="Consectetur">Consectetur</a></li>
			<li>
				<ul>
					<li><a href="#hl_172" title="Adipiscing">Adipiscing</a></li>
					<li><a href="#hl_182" title="Elit">Elit</a></li>
				</ul>
			</li>
			<li><a href="#hl_191" title="Nullam">Nullam</a></li>
		</ul>
	</div>
</div>

옵션

strip: false
  • 제목이 길 경우 일부만 출력할지 정합니다. true로 설정하면 stripAfter에서 정한 값만큼 제목이 출력됩니다.
stripAfter: 15
  • 출력할 제목의 길이를 정합니다.
scrollSpeed: 300
  • 스크롤 속도를 정합니다.
scrollOffset: 10
  • 제목 위 어느 정도까지 이동할지 정합니다.

Related Posts

jQuery / Method / .parent() - 부모 요소 선택하는 메서드

jQuery / Method / .parent() - 부모 요소 선택하는 메서드

.parent() .parent()는 어떤 요소의 부모 요소를 선택합니다. 문법 .parents( ) selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택합니다. 예를 들어 $( 'p' ).parent().css( 'color', 'green' ); 은 p의 부모 요소의 색을 녹색으로 만들고, $( 'p' ).parent( 'div' ).css( 'color', 'green' ); 은 p의 부모 요소가 div일 때만 녹색으로 만듭니다. 예제 ef를 클래스 값으로 갖는 ...

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다. HTML 문서에 ...

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

.empty() .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다. 문법 .empty() 예를 들어 <h1>Lorem</h1> 일 때 $( 'h1' ).empty() 를 하면 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery / Method / .html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.html() .html()은 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .text()와 비슷하지만 태그의 처리가 다릅니다. 문법 1 .html() HTML 태그를 포함하여 선택한 요소 안의 내용을 가져옵니다. 예를 들어 var jb = $( 'h1' ).html(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .html( htmlString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

.wrapAll() .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 모든 p 요소를 모아서 div 태그로 감쌉니다. 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

jQuery를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두 가지로 구분할 수 있습니다. 다른 라이브러리와 충돌 다른 버전의 jQuery와 충돌 각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다. 다른 라이브러리와 충돌 jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다. 이를 방지하는 방법은 ...

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

.resize() .resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다. 문법 $( window ).resize( function() { // do somthing ​} ); 예제 웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / HTML 태그 바꾸기

jQuery / HTML 태그 바꾸기

예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); h2 요소를 선택하고 내용으로 들어간 후 h2 태그를 없애고 p 태그로 감싼다. 새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다. $( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );

jQuery / Method / .load()

jQuery / Method / .load()

.load() .load()는 다른 문서 등에서 내용을 가져와 현재 문서에 나타냅니다. 문법 .load( url ) 예를 들어 a.html의 p 요소를 가져와 div 요소 안에 넣으려면 다음과 같이 합니다. $( 'div' ).load( 'a.html p' ); 예제 load-02.html에서 id 값이 ab인 요소를 가져와서, 현재 문서의 id 값이 xy인 요소 안에 넣습니다. load-01.html <!doctype html> <html lang="ko"> ...

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자이다. 문법 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의한다. $( ':contains( text )' ) 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택한다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만든다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않는다. <!doctype html> <html lang="ko"> ...