DIV 내의 컨텐츠 인쇄하기

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

페이지 로드 시 특정 DIV 또는 앵커(anchor) 위치로 스크롤되도록 해야 하는 경우에 다음과 같은 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)하는 방법은 여기를 참고하시기 바랍니다. 이외에도 다양하게 응용할 수 있을 것입니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.