lundi 2 novembre 2009

jquery animate 효과를 이용한 페이지 맨위로 이동하기

아래와 같은 코드의 추가로 페이지 맨위로 가는 스크롤탑 효과를 낼 수 있다.
[code]$( 'html, body' ).animate( { scrollTop: 0 }, 0 );[/code]
부드러운 스크롤링 효과를 내고 싶을땐 slow를 추가해준다. [code]$( 'html, body' ).animate( { scrollTop: 0 }, 'slow' );[/code]
jquery에 적용할 전체 소스 [code]$(document).ready(function() {
$('.backtotop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
;});
;});[/code]

장점:
1. 예전에도 자바스크립트로 스스륵 올라가는 효과는 많았지만, IE에서는 되고 파폭에선 안되고, body onload등을 써서 다른 소스와 충돌나고 랙걸리고..배보다 배꼽이 더컸던것에 비해 가볍고 크로스브라우징(IE 6,7,8, 크롬, 파폭, 사파리 확인)이 되며 다른 소스와 충돌날 일도 없다.

2. 보통 anchor 를 이용해서 top으로 가는 소스의 경우 한번 클릭하고 나면 주소창에 # 나 #top 등이 따라붙어서 찜찜했던거 해결

3. 별도의 anchor점(a name="top") 지정없이 간단히 원하는곳에 스크롤이 멈추게 할수있다.

단점: 알려주세요 !

16 commentaires:

  1. 야호~ 1빠~



    ㅋㅋㅋ



    애들 이러더군요^^



    좋은 테크 주심에 감사드립니다,. ^^

    RépondreSupprimer
  2. @Popeye - 2009/11/13 02:52
    네 지금 오른쪽 [top]에 적용되있으니 그대로 하시면 됩니당~

    RépondreSupprimer
  3. 원하는 div를 .tt-GNB 자리에 바꿔 넣으려면 어떻게 해야 하죠?



    원하는 건 li 입니다.... 일직선 상의 카테고리...

    RépondreSupprimer
  4. @Popeye - 2009/11/13 03:26
    흠.. .tt-GNB 라면 상단 토글에 감춰진 텍큐메뉴인데,

    거기다 어떻게 적용하시겠단 말씀이신지요 ?

    잘 못알아 들었어요 ㅠㅠ

    RépondreSupprimer
  5. @breton - 2009/11/13 03:30
    비밀 댓글 입니다.

    RépondreSupprimer
  6. @Popeye - 2009/11/13 03:26
    제가 이해한게 맞다면, 우선은 위 포스트 내 소스적용과 무관한 질문이신거죠?

    그리고, 오른쪽 상단 텍큐버튼 눌렀을때 현재 tt-GNB 대신에 다른 div가 나오게... 맞나요 ?

    그거라면 간단하죠. 본 스킨내 자바소스에서 tt-GNB를 다른 새로 넣을 div 클래스 값으로 넣으시고, div도 당연히 새로 생성하시구요..

    새로 생성한 div의 경우 tt-GNB 스타일 값 참고해서 토글버튼 누르기 전에는 보이지 않도록 감춰두시면 되겠죠 ?



    그 말씀하신게 아니면? -_-;;

    RépondreSupprimer
  7. @breton - 2009/11/13 04:00
    넵, 잘 알겠습니다 ㅎㅎ

    RépondreSupprimer
  8. 좋은 소스 감사해요...^^

    주말 따뜻하게 보내세요...~~~

    RépondreSupprimer
  9. @한성민 - 2009/11/13 18:54
    항상 성민님 덕분에 아~~ 오늘이 금요일이구나~~ 하고 알게 됩니다.

    성민님도 즐건 주말 되세요.

    RépondreSupprimer
  10. 해당 클래스에 마우스가 올라 갔을 때 포인터가 손모양으로 바뀌면 좋겠습니다.



    그리고 원하는곳에 스크롤을 멈추게 하려면 어디를 바꾸면 됩니까?

    가령 아이디나 클래스가 xxxxx 라면요?



    위치는 class 또는 id로 지정하면 됩니까?

    RépondreSupprimer
  11. 적절한 응용방법이네요. 한수 배워갑니다.

    RépondreSupprimer
  12. @breton - 2009/11/14 10:19
    네 거기에 넣으시면 되요 ^^

    RépondreSupprimer
  13. @Popeye - 2009/11/14 05:04
    cursor: pointer; 이렇게 해주시면 손모양 됩니다.

    스크롤 멈출 점 지정은 css 가 아닌 소스내에서

    { scrollTop: 원하는 수치px }

    이렇게 해 주세요 ^^

    저기서 원하는 수치란 브라우저 상단에서 부터의 높이 입니다.

    100 이라면 상단으로 부터 100px에서 멈추게끔...

    RépondreSupprimer
  14. @엘양 - 2009/11/14 06:05
    안녕하세요, 조금이라도 도움이 되셨다면 저야 기쁘죠 ^^

    RépondreSupprimer
  15. 위 코드를 어디에 넣을까요?



    jQuery(document).ready(function($){



    위 줄(행) 바로 밑행에 넣으면 되나요?





    jQuery(document).ready(function($){

    *************************************요기에요???*********************

    $(".btn-slide4").click(function(){

    $("#tt-GNB").slideToggle("slow");

    $(this).toggleClass("active"); return false;

    });

    RépondreSupprimer
  16. @breton - 2009/11/14 10:15
    넵, 알려 주신 대로 복습 완료했습니다^^

    RépondreSupprimer