In the example below please click on abc from left side.
I need the right side to scroll so the first instance of abc is visible
And - if possible - the right abc should be marked
On my site - on click - the right side is scrolled a few pixels - Whatever is clicked on left side - but not to the desired text
In the snippet here - on click - there is no a scroll at all
$('.atitle').on('click', function(){
let a = $(this).text();
$('#bins').scrollTop($("*:contains(" + a + "):first").offset().top);
});html{
overflow:hidden;
}
.grida{
display:grid;
grid-template-columns:auto 1fr;
}
.gridaa, .bins{
height:99px;
overflow-y:scroll;
}
.bins{
white-space:pre-wrap;
}
.atitle{
cursor:pointer;
padding:0 14px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='grida'>
<div class='gridaa'>
<div class='atitle'>lorem</div>
<div class='atitle'>ipsum</div>
<div class='atitle'>abc</div>
<div class='atitle'>dolor</div>
<div class='atitle'>sit</div>
<div class='atitle'>amet</div>
<div class='atitle'>sky</div>
<div class='atitle'>earth</div>
<div class='atitle'>sun</div>
<div class='atitle'>moon</div>
</div>
<div class='gridab'>
<div class='bins' id='bins'>
sky
moon
earth
sun
sit
amet
ipsum
abc
lorem
sit
dolor
</div>
</div>
</div>