将滚动条添加到jQuery中具有相同类的下一个元素

Question

我尝试添加单击箭头的功能，将用户滚动到具有指定类的下一部分。每个部分将具有相同的类，并带有一个带有要在jQuery中定位的类的箭头。所以我将像这样设置几个部分：

<section class="homeSection">
   <div class="content">
     //Content goes here
   </div>
   <div class="btnContainer">
    <button class="arrow">Arrow</button>
   </div>
</section>

<section class="homeSection">
   <div class="content">
     //Content goes here
   </div>
   <div class="btnContainer">
    <button class="arrow">Arrow</button>
   </div>
</section>

<section class="homeSection">
   <div class="content">
     //Content goes here
   </div>
   <div class="btnContainer">
    <button class="arrow">Arrow</button>
   </div>
</section>

//And so on...

因此，此设置大约设置了5个部分，该部分和按钮的类相同。然后，我想做的就是单击某个部分的按钮时，它将滚动到其下面的下一个部分，并且该循环将继续进行，直到您到达最后一个部分和页面末尾为止。

我起初是这样设置的：

    $(".downArrow--hero").click(function() {
    $('html, body').animate({
        scrollTop: $(".cardItems").offset().top
     }, 1000);
     });

它将基于一个唯一的类来定位每个部分，但是我现在需要使用具有相同类的每个部分对其进行设置。我最好的方法是什么？