我可以在单击项目之前阻止$ .scrollify.next（）吗？

Question

我正在使用jquery-scrollify来帮助用户完成表单流程。他们应该先回答一个问题，然后再回答下一个问题。

全部禁用滚动功能的问题在于，用户应该能够向上滚动以更改/查看上一个答案，但在回答前一个答案之前，不能滚动到下一个项目。

我尝试隐藏所有以后的部分，直到单击了表单元素为止，但是$ .scrollify.next（）不起作用。即使不再隐藏，也无法滚动到下一部分。

<div class="scroller">
    <section class="scroll-section green">
        <h1>This is section one</h1>
        <a href="" class="btn btn-white">One</a>
        <a href="" class="btn btn-white">Two</a>
        <a href="" class="btn btn-white">Three</a>
    </section>
    <section class="scroll-section orange hide-section">
        <h1>This is section two</h1>
        <a href="" class="btn btn-primary">One</a>
        <a href="" class="btn btn-primary">Two</a>
        <a href="" class="btn btn-primary">Three</a>
    </section>
    <section class="scroll-section blue hide-section">
        <h1>This is section three</h1>
        <a href="" class="btn btn-pink">One</a>
        <a href="" class="btn btn-pink">Two</a>
        <a href="" class="btn btn-pink">Three</a>
    </section>
    <section class="scroll-section red hide-section">
        <h1>This is section four</h1>
        <a href="" class="btn btn-white">One</a>
        <a href="" class="btn btn-white">Two</a>
        <a href="" class="btn btn-white">Three</a>
    </section>
</div>

$('.btn').click(function(e) {
    e.preventDefault();
    $thisSection = $(this).closest('.scroll-section');
    $nextSection = $thisSection.next();
    $nextSection.removeClass('hide-section');
    setTimeout(function() {
        $.scrollify.next();
    }, 300);
});

.hide-section {
    display: none;
}

我希望在单击.btn部分中的.green之后，页面将滚动到.orange部分。相反，.hide-section被删除了，但不会滚动。