JSFiddle - React, Tailwind, and code Playground

HTML

<div class="terms">
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>
SOME TnC<br>

</div>

<button class="check">
Next
</button>

<span class="msg">Kindly read entire tnc before proceeding</span>

CSS

.terms{
  border:1px sold #000;
  height:200px;
  overflow:scroll;
  
}

.msg {
  color:red;
  background:yellow;
  display:none;
}

JavaScript

$(document).ready(function(){
$('.check').on('click', function(){

var scrollTop = $('.terms').scrollTop();
if (scrollTop<357)
{
$('.msg').fadeIn(2000).fadeOut(2000);
}
else
{
	alert('thanks for reading tnc');
}
console.log( "scroll height:"+scrollTop);
});
});