JSFiddle - React, Tailwind, and code Playground

by insertusernamehere

HTML

<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>

CSS

div.image {

    border:        1px solid red;
    height:        500px;
    width:        500px;
}

JavaScript

$('.image').click( function() {
    $('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2  }, 200);
});