jQuery-scrollTo与类的下一个元素

Question

我有类似以下HTML示例的内容

<input type="button" name"btnScroll" value="Scroll" class="scroll-button" />
<div id="builder-items-container">
     <div class="item-container scroll-marker">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container scroll-marker">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container scroll-marker">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container">STUFF HERE</div>
     <div class="item-container scroll-marker">STUFF HERE</div>
</div>

我希望页面上有一个按钮，单击该按钮时将滚动到下一个滚动标记div。 我遇到的问题是即使用户手动滚动页面也试图使其正常工作。 就像我该怎么做，无论他们当前在页面上的什么位置，当他们单击我的滚动按钮时，它都会转到“ scroll-marker”类的下一个出现位置？

这是我到目前为止尝试过的...

// Scroll Down button
$(document).on('click', '.scroll-button', function(e) {
    if ($('.scroll-marker').eq(scrollItem).length) {
        var $scrollToItem = $('.scroll-marker').eq(scrollItem);
        $('#builder-items-container').animate({
            scrollTop: $scrollToItem.offset().top - 150
        }, 500);
        // Increment our scrollItem var
        scrollItem++;   
    } else {
        // No more to scroll to - hide the button
        $('.scroll-button').fadeOut(500);
    }
});

长度的第一个检查是我尝试隐藏滚动按钮，一旦不再出现“ .scroll-marker”来滚动以进一步向下滚动页面。

如果有人能证明我做错了，我将非常感谢。 谢谢！

Answer 1

if语句的问题。您可以像这样使用它

 var scrollItem = 1; // Scroll Down button $(document).on('click', '.scroll-button', function(e) { var $scrollToItem = $('.scroll-marker').eq(scrollItem); $('body').animate({ scrollTop: $scrollToItem.offset().top - 150 }, 500); // Increment our scrollItem var scrollItem++; if ($('.scroll-marker').eq(scrollItem).length < 1) { // No more to scroll to - hide the button $('.scroll-button').fadeOut(500); scrollItem = 0; } }); 

 .scroll-button{ position: fixed; top : 0; } .item-container{ height: 500px; background: #ff0066; } .scroll-marker{ background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" name"btnScroll" value="Scroll" class="scroll-button" /> <div id="builder-items-container"> <div class="item-container scroll-marker">STUFF HERE</div> <div class="item-container">STUFF HERE</div> <div class="item-container">STUFF HERE</div> <div class="item-container">STUFF HERE</div> <div class="item-container scroll-marker">STUFF HERE</div> <div class="item-container">STUFF HERE</div> <div class="item-container">STUFF HERE</div> <div class="item-container">STUFF HERE</div> <div class="item-container scroll-marker">STUFF HERE</div> <div class="item-container">STUFF HERE</div> <div class="item-container">STUFF HERE</div> <div class="item-container">STUFF HERE</div> <div class="item-container scroll-marker">STUFF HERE</div> </div>