jquery - 使用单独的 'button' jquery 向上滑动每个 div

Question

我有一组全宽/全高的 div，浏览器窗口底部有一个“按钮”，可以向下滑动到下一个 div。

基本的 HTML 是

<main>
    <div class="a">
      <div class="inner">
        <div class="inner"><a href="" class="down"></a></div>
      </div>
    </div>
    <div class="b">
      <div class="inner">
        <div class="inner"><a href="" class="down"></a></div>
      </div>
    </div>
    <div class="c">
      <div class="inner">
        <div class="inner"><a href="" class="down"></a></div>
      </div>
    </div>
    <div class="d">
      <div class="inner">
      </div>
    </div>
</main>

我已经在第一个“向下”按钮上工作了 -

var $elem = $('.inner');

$('.down').click(
   function (e) {
     $('html, body').animate({scrollTop: $elem.height()}, 560);
   }
);

我如何编辑 jQuery 以便每个 .down 都向上滚动？

提前致谢

编辑:

目前，当点击“a”中的“向下”时，jQuery 会通过动画 HTML 使“b”向上动画，body 向上。但我每次都需要它向上滚动到下一个 div。

因此，单击“b”中的“向下”会将页面向上滚动到“c”的顶部，单击“c”中的“向下”会将页面向上滚动到“d”的顶部。

这样是不是更清楚了？

Answer 1

尝试

$('.down').click(
   function (e) {
     var idx = $(this).parentsUntil('main').last().index();
     $('html, body').animate({scrollTop: $('main > div').eq(idx).scrollTop()}, 560);
   }
);