-
jQuery - .scrollTop()jQuery 2020. 6. 23. 18:20
.scrollTop()
- 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정한다.
문법1
.scrollTop()스크롤바 수직 위치를 가져온다. 예를 들어
$( 'div' ).scrollTop();문법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' 카테고리의 다른 글
jQuery - .slideDown() (0) 2020.06.23 jQuery - .slice(); (0) 2020.06.23 jQuery - .resize() (0) 2020.06.23 jQuery - replaceWith() (0) 2020.06.23 jQuery - .prop() (0) 2020.06.23