jquery - 用单独的“按钮”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 向上滚动？

提前致谢

编辑：

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

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

这是否使它更清楚？

Answer 1

尝试这个

演示

$('.down').click(
   function (e) {
       var $elem= $(this).closest('.inner');

     $('html, body').animate({scrollTop: $elem.offset().top+$elem.height()}, 560);
   }
);

Answer 2

尝试

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