JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" style="height: 100px;">
    <p>some not so tall box</p> <span class="scroll-link">scroll to top of box</span>

</div>
<div class="box" style="height: 100px;">
    <p>some not so tall box</p> <span class="scroll-link">scroll to top of box</span>

</div>
<div class="box" style="height: 100px;">
    <p>some not so tall box</p> <span class="scroll-link">scroll to top of box</span>

</div>
<div class="box" style="height: 500px;">
    <p>some tall box</p> <span class="scroll-link">scroll to top of box</span>

</div>
<div class="box" style="height: 100px;">
    <p>some not so tall box</p> <span class="scroll-link">scroll to top of box</span>
</div>

CSS

.box {
    position: relative;
    margin: 8px;
    background-color: #9CF;
}
.scroll-link {
    position: absolute;
    bottom: 0;
    cursor: pointer;
}

JavaScript

$('.scroll-link').on('click', function () {
    var $parent = $(this).parent();
    var offset = $parent.offset().top;
    
    if (offset < $(window).scrollTop()) {
        $('html, body').animate({
            scrollTop: offset
        }, 'slow');
    }
});