单击元素时滚动顶部的div

Question

我希望div在点击图像或div等元素时滚动到其顶部位置。 HTML：

<div class="arrow"></div>
<div style="background: red; width: 100%; float: left; height:900px;">df</div>

的CSS：

.arrow{ width: 30px; height: 30px; margin: 0 auto; clear: both; background-color: #ccc; cursor: pointer;}

jquery的：

$(document).ready(function(){

       $(window).scroll(function(){

           $('.arrow').click(function(){

               $(this).next('div').animate({scrollTop:0},600);


           });

       });//end window scroll
 });

我尝试删除$(window).scroll(function(){}以防它仅在滚动时出现，但没有效果。我只想让红色框移动到topon点击箭头div。提前谢谢。