JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id='messages' style='height: 200px; overflow-y: scroll'>
  <div id='1' style='height: 160px; border-bottom: 1px solid gray;'>
    1
  </div>
  <div id='2' style='height: 160px; border-bottom: 1px solid gray;'>
    2
  </div>
</div>

JavaScript

var messages = document.getElementById('messages');
var one = document.getElementById('1');
var two = document.getElementById('2');

console.log(two.offsetTop);
$(messages).animate({
  scrollTop: two.offsetTop
}, 500)