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滚动它？

提前致谢

编辑：

当jQuery通过动画HTML来点击'a'中的'down'时，jQuery会动画'b'。但我需要它每次滚动到下一个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);
   }
);

Answer 2

试试这个

<强> DEMO

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

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

使用单独的“按钮”jquery滑动每个div

2 个答案: