jquery - 穿过窗口底部后动画 div 从顶部重新开始

Question

当样式为正方形的 div 的顶部越过窗口底部以从顶部再次开始其位置时，我正在尝试在页面加载时制作无限动画。我的代码使 div 每 1 秒从上到下移动 +50px，但我无法解决在它穿过屏幕底部后从顶部重新开始的问题。任何帮助都会很棒。

p.s:抱歉我的英语不好。

$(document).ready(function(){
setInterval(function(){
$("#john").animate({top:'+=50px'},1000)
},1000);
if($("#john").offset().top > $(window).height()){
$("#john").animate({top:'0px'})
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='john' style="position: relative; background-color:orange; width:60px; height:60px">title</div>

Answer 1

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

    if($("#john").offset().top > $(window).height()){
      $("#john").animate({top:'0px'})
    }
    
    $("#john").animate({top:'+=50px'},1000)
    },1000);  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='john' style="position: relative; background-color:orange; width:60px; height:60px">title</div>