[jQuery] 페이지 로드 시 특정 DIV로 스크롤시키는 방법

페이지 로드 시 특정 DIV 또는 앵커(anchor) 위치로 스크롤되도록 해야 하는 상황이 있습니다. 그런 경우 간단한 jQuery로 쉽게 특정 위치로 이동되도록 할 수 있습니다.

페이지 로드 시 특정 DIV로 스크롤시키는 방법(jQuery)

페이지 로드 시 특정 DIV나 앵커 위치로 스크롤되도록 하려면 다음과 같은 jQuery 코드를 사용할 수 있습니다.

$(document).ready(function () {
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
// Source: stackoverflow

jsfiddle에서 실제 작동을 확인할 수 있습니다.  이 기법은 상황에 따라 유용하게 사용할 수 있습니다. 예를 들어, 워드프레스의 KBoard 게시판에서 글쓰기를 누르거나 목록 버튼을 누르면 헤더 부분 때문에 글쓰기 폼이나 게시판 목록이 화면 아래에 위치할 수 있습니다. 만약 글쓰기 폼이나 게시판 목록이 화면 위쪽에 위치하기를 원하는 경우 위의 스크립트를 응용할 수 있습니다.

예를 들어, 다음과 같은 스크립트를 사용하면 케이보드 기본(Default) 스킨을 사용할 때 글쓰기 버튼을 누르면 화면이 글쓰기 폼으로 스크롤됩니다.

$(document).ready(function () {
$('html, body').animate({
scrollTop: $('#kboard-default-editor').offset().top
}, 'slow');
});

아바타 스킨의 경우 ID 부분을 #kboard-avatar-editor로 바꾸어주면 됩니다. 워드프레스에서 js 파일을 로드(enqueue)하는 방법은 여기를 참고하시기 바랍니다. 이외에도 다양하게 응용할 수 있을 것입니다.

참고:

• jQuery를 사용하여 텍스트 바꾸기
• 워드프레스 Quform과 케이보드 게시판 연동 소스 코드