滚动到下一个元素会向后滚动到第一个元素

Question

我正在尝试在页面顶部创建一个栏，每次单击当前元素中的按钮时，该栏会滚动到下一个元素。

我的代码如下所示：

holder = new

jQuery的：

<div id="wrap">

   <div class="section">

        Click here!

        <button class="nav" type="button">Go!</button>

    </div>

    <div class="section">

        <button class="nav" type="button">Next!</button>

    </div>

    <div class="section">

        <button class="nav" type="button">Done!</button>

    </div>

</div>

问题：当我点击 Next！时，它不会滚动到 Done！的部分，而是根本不滚动。按钮 Go！正确向下滚动。

Answer 1

使用position而不是offset并添加您当前的scrollTop：

$('button.nav').click(function() {
    var w = $("#wrap");
    w.animate({
        scrollTop: $(this).parent().next().position().top + w.prop("scrollTop")
    }, 400);
});

$('button.nav').click(function() {
  var w = $("#wrap");
  w.animate({
    scrollTop: $(this).parent().next().position().top + w.prop("scrollTop")
  }, 400);
});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.section {
  height: 20em;
}
#wrap {
  height: 100%;
  overflow: scroll;
}

<div id="wrap">

  <div class="section" id="a">

    Click here!

    <button class="nav" type="button">Go!</button>

  </div>

  <div class="section" id="b">

    <button class="nav" type="button">Next!</button>

  </div>

  <div class="section" id="c">

    <button class="nav" type="button">Done!</button>

  </div>

  <div style="height: 50em"></div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这是一个回到顶部的版本：

$('button.nav').click(function() {
  var w = $("#wrap");
  var next = $(this).parent().next(".section");
  var top = next.length ? next.position().top + w.prop("scrollTop") : 0;
  w.animate({
    scrollTop: top
  }, 400);
});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.section {
  height: 20em;
}
#wrap {
  height: 100%;
  overflow: scroll;
}

<div id="wrap">

  <div class="section" id="a">

    Click here!

    <button class="nav" type="button">Go!</button>

  </div>

  <div class="section" id="b">

    <button class="nav" type="button">Next!</button>

  </div>

  <div class="section" id="c">

    <button class="nav" type="button">Done!</button>

  </div>

  <div style="height: 50em"></div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>