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>

---

问题是：与其用Done！（完成）滚动到该部分！，单击“下一步”时，它根本不会滚动！。按钮打开！正确向下滚动。

使用

位置

而不是

偏移量

，并添加当前的

滚动顶部

：

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

$（'button.nav'）。单击（函数（）{
var w=$（“包装”）；
w、 生动活泼({
scrollTop:$（this.parent（）.next（）.position（）.top+w.prop（“scrollTop”）
}, 400);
});
body，
html{
身高：100%；
保证金：0；
填充：0；
}
.科{
高度：20em；
}
#包裹{
身高：100%；
溢出：滚动；
}

点击这里！
走！
下一个
完成！
听起来文档正文不够高，无法进一步滚动。浏览器不会滚动到文档底部高于视口底部的位置。它应该足够高。如果我通过在每个部分上设置不同的id属性来使用url滚动，它也会向下滚动到最后一个元素。很好，这意味着这不是问题。它可以工作，谢谢！：D尽管我必须删除
w.prop（“scrollTop”）
，否则一旦我通过第一个滚动元素，它就会向下滚动到底部。@Sander:可能CSS有点不同。：-）很高兴这有帮助！
$('button.nav').click(function() {
    var w = $("#wrap");
    w.animate({
        scrollTop: $(this).parent().next().position().top + w.prop("scrollTop")
    }, 400);
});