jquery - 如何修复滚动按钮以始终转到下一部分，除非最后一部分返回顶部

Question

我的页面上有一个部分漏斗按钮，几乎可以像我想要的那样工作。现在它将进入下一个部分，但基于“部分”的文档页面流，因此如果用户在没有按钮的情况下向下滚动然后单击按钮，它将返回到页面的“下一部分”而不是实际的下一个“部分”。我试图找到一种方法，无论他们在哪里，如果他们点击按钮，它就会进入实际的下一部分，除非他们点击底部，在这种情况下，它会滚动回顶部，我目前正在工作。任何建议都会很棒！谢谢！

我让它基于 .next() 进入下一部分，但它仍然会进入页面的下一部分，而不是实际的下一部分，具体取决于用户在页面上的位置。我接下来要转到的每个部分都有一个 .bucket-section 类

HTML：

 <div class="scroll-indicator__container">
    <div class="scroll-indicator">
    Scroll Button
    </div>
</div>

jQuery：

var scrollButton = $('.scroll-indicator')
var currentPosition = $bucketSections.first()


//scroll indicator, scroll to closest section
  $(scrollButton).click(function () {
    var currentPosition = $currentPosition.next('.bucket-section');

    if (currentPosition.length) {
        $currentPosition = currentPosition;

    } else {
        $currentPosition = currentPosition = $('.bucket-section').first();
    }

    $('html, body').stop(true).animate({
        scrollTop: $(currentPosition).offset().top - 50,
    }, 800);
    return false;
});


 //rotate arrow to point up when reaches last section
$window.scroll(function () {
    var scrollIndicatorHeight = $(document).height() - $window.height() - $window.scrollTop();

    if (scrollIndicatorHeight <= $('.section--registration-form').height()) {
        $(scrollButton).addClass('scroll-indicator--up');
    } else {
        $(scrollButton).removeClass('scroll-indicator--up');
    }
});

如果可能，无论用户在页面上的哪个位置，单击按钮都转到下一部分

标签： jqueryhtmlcss