안녕하세요. 송기석입니다.


오늘은 원하는 위치에 자동 스크롤 되는 기능에 대하여 올리겠습니다.

제가 사용한 코드는 다음과 같습니다.


var target_id='#image_point';

$('body, html').css('scrollTop', $(target_id).offset().top);

$('body, html').animate({ scrollTop: $(target_id).offset().top }, 1000);

window.scrollTo(0, $(target_id).offset().top);


코드의 내용은 반대 순서로 설명하겠습니다.

window.scrollTo() 는 스크롤 위치를 설정하는 것으로X 좌표, Y좌표 값입니다.

코드에서는 X좌표는 0이므로 Y좌표 즉 높이만 설정된 것입니다.


그다음은 animate 설정인데 이것은 에니메이션 효과를 주는 것으로 

원하는 위치로 스크롤 될때가지 1초(1000) 값동안 움직이게 됩니다.

만약 이부분이 없으면 바로 위치로 이동합니다.


그다음은 제가 테스트 할 때는 필요성을 모르겠지만 브라우저마다 특성이 있어 그것을

보안하기 위해 있는 것 같습니다. 어떤 브라우저의 특성인지는 모릅니다.


마지막은 원하는 위치의 아이디입니다.


추가로 $(target_id).offset()는 원하는 위치의 왼쪽값과 높이값를 가지고 있습니다. 그래서

$(target_id).offset().top 로 높이값을 구했습니다.


감사합니다.



이 게시물을...