Scrolling to top of div on button click

Question

I have numerous .item cards on my page but only 3 are visible initially. I've used slice() to hide the other cards on page load.

I have a load more button which once clicked, gets the next three hidden cards and makes them visible.

When clicking this load more button, I want it to scroll to the top of the section where these newly loaded in / visible cards now are. To do this, I have added in a div to the last visible card with the class .scroll__anchor .

Idea being that when clicking load more , that it will scroll to where '.scroll__anchor' is.

However, with my current approach, it always scrolls below where scroll__anchor is.

 var total = $(".container > div").length; if(total > 3){ $(".container").after('<button id="loadmore">Load more</button>'); $(".container > div").slice(3).hide(); } $("body").on("click", "#loadmore", function(){ $(".scroll__anchor").remove(); $(this).siblings(".container").find(".item:hidden").slice(0, 3).show(); if($(".container > .item:hidden").length === 0){ $(this).remove(); } $('.container .item:visible:last').append('<div id="scrollToAnchor" class="scroll__anchor"></div>'); $('html, body').animate({ scrollTop: $("#scrollToAnchor").offset().top }, 500); })

 body{ height: 1500px; } .container{ display: flex; flex-direction: row; flex-wrap: wrap; max-width: 1000px; justify-content: center; } .container .item{ border: 1px solid darkblue; padding: 20px 10px; width: 28%; margin-bottom: 30px; margin-right: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="container"> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> </div>

Answer 1

The reason it scrolls lower than you need is that you add your div to the end of the last visible element after making the next row visible, so it is effectively scrolling to the bottom. The good new is that you don't need any artificial divs, just scroll to the last visible element itself:

 scrollTop: $(".container .item:visible:last").offset().top