jQuery - 페이지 내의 특정 위치로 스크롤을 이동시키기

jQuery - 페이지 내의 특정 위치로 스크롤을 이동시키기

버튼을 누르거나 링크를 누르면 같은 페이지 내의 특정 위치로 스크롤을 이동시킬 수 있다. jQuery의 offset() 메서드를 이용해서 태그의 위치를 알아내고 animate() 메서드를 이용해서 부드럽게 원하는 위치로 이동하도록 코드를 작성할 수 있다.

[스크립트 부분]

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

$('#btn1').click(function(){

var offset = $('#div1').offset(); //선택한 태그의 위치를 반환

                //animate()메서드를 이용해서 선택한 태그의 스크롤 위치를 지정해서 0.4초 동안 부드럽게 해당 위치로 이동함 

        $('html').animate({scrollTop : offset.top}, 400);

});

});

</script>

[html 태그 부분]

<button id="btn1">div1로 이동</button>

<div id="div1">div1</div>