jQuery / Method / .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드
.scrollTop()
.scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다.
문법 1
.scrollTop()
스크롤바 수직 위치를 가져옵니다. 예를 들어
$( 'div' ).scrollTop();
는 div 요소의 스크롤바 수직 위치를 가져옵니다.
문법 2
.scrollTop( value )
스크롤바 수직 위치를 정합니다. 예를 들어
$( 'div' ).scrollTop( 300 );
은 div 요소의 스크롤바 위치를 위에서 300px로 정합니다.
예제 1
버튼을 클릭하면 div 요소의 스크롤바 위치를 알려주는 예제입니다. 스크롤바를 움직이고 버튼을 클릭하면 값이 변합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.jbBox {
width: 200px;
height: 200px;
overflow: auto;
margin-bottom: 20px;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button' ).click( function() {
$( '.jbBox' ).scrollTop( 50 );
} );
} );
</script>
</head>
<body>
<div class="jbBox">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.
</p>
</div>
<button>Click</button>
</body>
</html>
예제 2
버튼을 클릭하면 div 요소의 스크롤바가 위에서 50px 위치로 이동합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.jbBox {
width: 200px;
height: 200px;
overflow: auto;
margin-bottom: 20px;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'button' ).click( function() {
alert( $( '.jbBox' ).scrollTop() );
} );
} );
</script>
</head>
<body>
<div class="jbBox">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.
</p>
</div>
<button>Click</button>
</body>
</html>
jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드
.appendTo() .appendTo()는 선택한 요소를 다른 요소 안에 넣습니다. 문법 .appendTo( target ) 예를 들어 $( 'p' ).appendTo( 'blockquote' ); 는 p 요소를 blockquote 요소 안으로 이동시킵니다. 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소 안으로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...
jQuery / Method / .toggle() - 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 하는 메서드
.toggle() .toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다. 문법 .toggle( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 ...
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 / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드
.removeAttr() .removeAttr()은 선택한 요소의 특정 속성을 제거한다. 문법 attributeName 속성을 제거한다. .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거한다. $( 'h1' ).removeAttr( 'title' ); 예제 input 요소의 placeholder 속성을 제거한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> input { font-size: ...
.animate()로 요소를 나타내기 다음과 같이 간단한 예제를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { box-sizing: border-box; margin: 0px; } .jb { height: 200px; padding: 20px; text-align: center; color: ...
jQuery / Selector / :selected - select에서 선택된 option를 선택하는 선택자
:selected는 select에서 선택된 option를 선택한다. :selected 대신 :checked를 사용해도 된다. 색을 선택하면 그 값을 div 요소의 배경색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; ...
jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동
jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다. GitHub : https://github.com/jakobbossek/jquery.toc Download : https://github.com/jakobbossek/jquery.toc/archive/master.zip 기본 사용법 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> 다음 ...
jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드
.slideDown() .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드
.clone() .clone()은 선택한 요소를 복제합니다. 문법 .clone( ) 예를 들어 $( '.ab' ).clone().appendTo( 'h1' ); 은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다. 예제 span 요소를 복제하여 h1 태그 안에 넣습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...
예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); h2 요소를 선택하고 내용으로 들어간 후 h2 태그를 없애고 p 태그로 감싼다. 새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다. $( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );