$ (창) .animate scrollTop이 작동하지 않는 이유는 무엇입니까?

Question

하는 경우 (확실하지 않습니다) 다음 코드가 작동 한 후

$('html, body').animate(
    { 
     "scrollTop": "500" 
    }, 
    500 
); 

왜하지 않습니다 다음 코드를 사용할 수 있습니까?

$(window).animate(
    { 
     "scrollTop": "500" 
    }, 
    500 
); 

다음 코드는 다음

$(window).scroll(myScrollFunctionHandler); 

를 작동하면 왜하지 않습니다 다음 코드를 사용할 수 있습니까?

$('html, body').scroll(myScrollFunctionHandler); 

왜 이런 식으로해야할까요?

Answer 1

window 귀하의 첫 번째 예는 작동하지 않는 이유입니다 scrollTop 속성을 가지고 있지 않습니다. document.body 않습니다.

두 번째 예로서

, $(window).scroll는 window.onscroll에 대한 이벤트 핸들러 설치 프로그램입니다. "body onscroll"이벤트가 없으므로, 이벤트가 DOM을 버블 링하지 않고 단지 위로 올라 오므로 body (또는 html) 요소에 설치된 이벤트 핸들러는 호출되지 않습니다.

Answer 2

이것은 내부 작업이 $(window).animate()이므로 발생해야합니다. 실험 결과에 따르면이 jQuery animate() 코드 내부에서 $(window).scrollTop()은 항상 0을 반환하고 $(window).scrollTop(value)은 값을 올바르게 설정할 수 없다고 제안했습니다.

그러나, animate() 전에 그 단계 콜백 함수에서 이러한 작업. 따라서 아래와 같은 코드가 제대로 작동합니다.

function scrollNow(final_val){ 
    var initial_val = $(window).scrollTop(), 
     diff = final_val - initial_val 
    ; 
    $(window).animate(
     { 
      scrollTop: diff, 
     }, 
     { 
      duration: 1000, 
      step: function(now, fx){ 
       $(window).scrollTop(initial_val + now); 
      } 
     } 
    ); 
}