본문 바로가기

Local Oriented/jQuery

화면에서 원하는 위치로 자동 스크롤, focus() hash() scrollIntoView(true) slideto

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>



http://hyvaa.tistory.com/207

.animate({scrollTop:0}, 'slow'); 흠미롭네요.. ^^.

그런데, html,body 쪽으로만 사용해 볼 만 하구요.


CSS 와 jQuery 이용한 스크롤

http://jaweb.tistory.com/400 


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);