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>