애니메이션을 사용하여 무한 루프를 만들고 상단 스크롤을

Question

함수/애니메이션을 반복하려고합니다. 페이지를 맨 아래로 스크롤 한 다음 맨 위로 이동하고 무한하게 수행합니다. 나는 그것을 수행하는 코드 만 한 시간이 :

$(document).ready(pagescroll); 
function pagescroll() { 
    var z = document.getElementById('main_container').clientHeight + 2400; 
    var speed = z * 2; 
    window.scroll(0,0); 
    $('body, html').animate({ scrollTop: z }, { easing: "linear", duration: speed }); 
} 

main_container 페이지에 걸쳐 스트레칭 사업부입니다. animate 다음에 pagescroll();을 추가하고 window.scroll(0,0)을 제거한 후 및 pagescroll()을 duration:speed 다음에 넣은 다음 모든 것을 setTimeout에 넣었지만 아무 것도 작동하지 않았습니다. 내가 찾은 모든 예는 효과가 없었습니다. 이 함수에 무한 루프를 추가하려면 어떻게해야합니까?

Answer 1

당신은 다음과 같이 당신의 animate 기능에 콜백을 추가해야합니다

$('body,html').animate(
    {scrollTop: z}, 
    {easing: "linear", duration: speed}, 
    function() { 
     $('body,html').scrollTop(0); // scroll to top when animation finished 
     pagescroll(); // call scroll function again 
    } 
); 

를 함수가 재귀 방식으로 작동합니다이 경우.