Sangil's blog

비동기로 데이터를 가져오지 않는경우. 동기방식으로 호출하여 호출된 페이지내에서 특정 위치로 화면을 이동시켜야 하는 경우가 있습니다. 이럴 경우 Jquery의 scrollTop과 animate를 이요하면 됩니다. scrollTop을 이용하여 이동할 경우 화면이 즉시 이동이 되구요 animate를 이용 했을 때는 몇초동안 이동하는 식의 에니메이션을 줄 수 있습니다.

주의 할점으로는 이미지가 로딩되기전에 해당 함수가 실행되면 offset값을 가져 올 수 없어서, 화면이 이동이 안되는데요. 이럴때는 img객체의 onload 콜백함수를 통해서 해결 할 수 있습니다 ^^

var img = new Image() ;
img.src = $('#imageId').attr('src') ;
img.onload = function() {
    var offset = $('#target').offset(); 
    //scrollTop을 이용하면 즉시 화면을 이동
    $('html').scrollTop(offset.top);
    //animate를 이용하면 (설정시간) 동안 화면 이동
    //$('html').animate({scrollTop : offset.top}, 400);
}