JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="element1">
<a href="#123">Click to See Listing</a>
<a href="#124">Click to See Listing</a>
<a href="#125">Click to See Listing</a>
</div>

<div class="element2 listings">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="listing" id="123">element contents</div>
<div class="listing" id="124">element contents</div>
<div class="listing" id="125">element contents</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>

CSS

.listings {
width:300px;
height:300px;
overflow-y:scroll;
word-wrap: break-word;
}

JavaScript

$(document).ready(function(){
        $("a").on('click', function(event) {
            if (this.hash !== "") {
                event.preventDefault();
                var hash = this.hash;
                $('.listings').animate({
                    scrollTop: ($(hash).offset().top + $('.listings').scrollTop())- 20
                }, 800);
            }
        });
    });