JSFiddle - React, Tailwind, and code Playground

HTML

<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>

CSS

#demo{
    position:fixed;
    top:0px;
    left:0px;
}
.answer{
    width:100%;
    height:200px;
    border:1px solid black;
}

JavaScript

$(function () {
    $(".answer").hide();
    $('#demo').click(function (e) {
        var _div = $('.answer[style*="display: none"]:first');
        if(_div.length){
         _div.slideDown();
         $('html,body').animate({
        scrollTop: _div.offset().top});
        }
        else{
        $(this).text('Done..! Scroll Bottom');
        }
       
    });
});