1. 자바스크립트 focus() 와 hash() 사용방법 <- 링크에서 설명
2. scrollIntoView(true)
3. slideto 플러그인 사용하는 방법 <- 링크에서 설명
4. 그 외에도 방법들이 많네요.. (본문 하단부를 읽어 보세요)
id="test" 라는 코드가 있다고 할때..
document.getElementById('test').scrollIntoView(true);
그냥 test.scrollIntoView(true); 해도 됩니다.
jQuery 함수 중에 이런 것이 있는지는 모르겠고..
$('#test').get(0).scrollIntoView(true); 와 같이 하면 작동.. !.!
또는, $('#test')[0].scrollIntoView(true); 와 같이 하면 작동.. !.!
IE10 에서는 get(0) 가 먹지 않아서.. 아래와 같이 사용해야 해요.
$('#test').each(function(){
this.scrollIntoView(true);
});
ps. IE10 현재 버전에선 get(0) 이나 [0] 를 사용해도 이제 정상 작동하네요.
브라우저 마이너 버전에 따라 달라지는 현상.. 으음.. ㅠ.
그런데, scrollIntoView(true) 와 focus() hash() 등은 서로 미세하게 다르네요..
만약 레이아웃이 아래와 같이 본문에서 왼쪽 끝이 아니고, 브라우저 창이 작게 열려서 스크롤이 필요하다면..
div 가 잘 보여지도록 우측으로도 스크롤 됩니다.
<div id="idScroll">...</div> |
반면에.. 동일한 레이아웃에서 .hash() 를 사용한다면, 좌우 스크롤은 하지 않아요.
<a name="aName>...</a> |
.animate({scrollTop:0}, 'slow'); 흠미롭네요.. ^^.
그런데, html,body 쪽으로만 사용해 볼 만 하구요.
CSS 와 jQuery 이용한 스크롤
jquery 를 이용해서 일정한 곳으로 애니메이션 스크롤
http://luckypong.tistory.com/73
이건 조금 다른 얘기지만 .scrollTop 을 이용해서 textarea 내에서 위치를 조정해 주는 방법.
http://verad.tistory.com/entry/jQuery-scrollTop-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-textarea-focus
$('textarea').scrollTop('#textarea')[0].scrollHeight);
'Local Oriented > jQuery' 카테고리의 다른 글
jQuery, live 죽이는 die 와 bind 죽이는 unbind 그리고 on 과 off (0) | 2011.12.22 |
---|---|
jQuery Ajax 다룰때 전통적인방식/커스텀이벤트/PubSub 등으로 나누어 생각 (0) | 2011.12.20 |
jQuery, each, click, toggle 을 몽땅 사용해서.. (2) | 2011.12.15 |
[모음글] jquery 이벤트 (0) | 2011.12.01 |
jQuery, a 태그의 target 에 _blank 속성을 부여하여 iframe 안의 링크가 모두 새창으로 열리도록 하는 방법 (2) | 2011.11.22 |