제이쿼리(J-Query) 이벤트 메소드 scroll(), scrollTop()

제이쿼리 scroll() 이벤트 메소드 

: 선택한 요소에서 스크롤을 위,아래로 이동시켰을 때 발생하는 이벤트 메소드

 

 

 

문법

$("selector").scroll(function(){

  //  code

});

 

 

 

ex.

$(function(){

  $(window).scroll(function(){    //  윈도우(화면)이 스크롤 됐을 때

    if($(this).scrollTop() == 0){    //  만약 위치가 0 이라면

      $(".btn_top").hide(300);    //  300(0.3초)의 속도로 selector를 숨겨라

      }else{    // 조건과 맞지 않을 때

      $(".btn_top").show(300); //   나타냄

    }

  });

});

 

 

 

 

 

제이쿼리 scrollTop() 이벤트 메소드

:선택한 요소의 수직 위치를 알아내거나 특정값으로 이동시키는 이벤트 메소드

 

 

 

문법

$("selector").scrollTop(function(){

  //  code

});

 

 

 

ex.

$(function(){

  $(".btn_top").click(function(){    //  selector 를 클릭했을 때

      $("html").animate({

      "scrollTop":0    //  top:0의 위치로 이동해라

    }, 1000);    //  이동 속도

  });

});

 

 

 

 

 

api.jquery.com/scroll/#scroll-handler

.scroll() | jQuery API Documentation

 

 

 

 

 

test.

ryu8811.github.io/jungle/class_4/07_scroll.html