본문 바로가기

[ programing ]/JavaScript + JQuery

jQuery 스크롤




<script>

$(document).ready(function(){

var info = $('#info');

$(window).on('scroll', function(){

var scroll_horizon = $(window).scrollLeft(); // 스크롤 수평 좌표 받아오기

var scroll_vertical = $(window).scrollTop(); // 스크롤 세로좌표 받아오기

info.children('.scrollLeft').text(scroll_horizon); // 폼에 좌표 써주기

info.children('.scrollTop').text(scroll_vertical); // 폼에 좌표 써주기

});

var form = $('#form');

var xField = form.children('.xField');

var yField = form.children('.yField');

var btn = form.children('.btn');

btn.click(function(){

$(window).scrollLeft(parseInt(xField.val())); // input에 입력한 수평좌표로 스크롤 이동

$(window).scrollTop(parseInt(yField.val())); // input에 입력한 세로좌표로 스크롤 이동

});

});

</script>






<div id="info">


<span>scrollLeft = </span><span class="scrollLeft">0</span><br>

<span>scrollTop = </span><span class="scrollTop">0</span>



<div id="form">

<input type="text" class="xField" value="" />

<input type="text" class="yField" value="" />

<input type="button" class="btn" value="입력" />

</div>


</div>