jQuery 공작소 : .scrollTop()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
scrollTop 메소드는 상하 스크롤 값을 읽어오거나 지정합니다.
예제 1
스크롤 값 읽어오기 그리고 지정하기
보기
아래 버튼을 마구 눌러보세요!
소스
<style type="text/css">
.css_test {
height : 300px;
margin-top : 10px;
overflow : hidden;
}
</style>
아래 버튼을 마구 눌러보세요!<br>
<button type="button" onclick="j_test(50)">아래로 스크롤</button>
<button type="button" onclick="j_test(-50)">위로 스크롤</button>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/24604B4B550B9B3718" /><br>
<img src="https://t1.daumcdn.net/cfile/tistory/223CC93854D74C4E32" /><br>
<img src="https://t1.daumcdn.net/cfile/tistory/26138D4854D7351522" /><br>
<img src="https://t1.daumcdn.net/cfile/tistory/231F2B38550B923C2D" /><br>
<img src="https://t1.daumcdn.net/cfile/tistory/2212AF4854D7351522" /><br>
</div>
<script type="text/javascript">
function j_test(n){
$('.css_test').scrollTop( $('.css_test').scrollTop() + n );
}
</script>
.css_test {
height : 300px;
margin-top : 10px;
overflow : hidden;
}
</style>
아래 버튼을 마구 눌러보세요!<br>
<button type="button" onclick="j_test(50)">아래로 스크롤</button>
<button type="button" onclick="j_test(-50)">위로 스크롤</button>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/24604B4B550B9B3718" /><br>
<img src="https://t1.daumcdn.net/cfile/tistory/223CC93854D74C4E32" /><br>
<img src="https://t1.daumcdn.net/cfile/tistory/26138D4854D7351522" /><br>
<img src="https://t1.daumcdn.net/cfile/tistory/231F2B38550B923C2D" /><br>
<img src="https://t1.daumcdn.net/cfile/tistory/2212AF4854D7351522" /><br>
</div>
<script type="text/javascript">
function j_test(n){
$('.css_test').scrollTop( $('.css_test').scrollTop() + n );
}
</script>
관련 CSS
jQuery
$( 셀렉터 ).scrollTop() - 셀렉터에 해당하는 요소의 세로스크롤 값을 읽어옵니다.
$( 셀렉터 ).scrollTop( 값 ) - 셀렉터에 해당하는 요소의 세로스크롤 값을 지정합니다.
$( '.css_test' ).scrollTop( $( '.css_test' ).scrollTop() + 10 ) - 값을 읽어온 후 +10 계산하여 다시 지정하기
이렇게 하면 +10px 만큼 스크롤 됩니다.
※ 좀더 우아한(?) 스크롤 기법은 화면스크롤 애니메이션을 참고해 주세요 ^^
+ 관련 jQuery +
jQuery 홈페이지 .scrollTop() API 문서 : https://api.jquery.com/scrollTop/