JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:relative;">
    <div class="arr1"></div>
    <div class="arr2"></div>
<textarea class="cl62" ></textarea>
</div>

CSS

.arr1  {
	width:20px; 
	height:20px; 
	position:absolute; 
	top:30px; 
	right:20px;
	background-color:#80CF97;
	cursor:pointer;
}
.arr2 {
	width:20px; 
	height:20px; 
	position:absolute; 
	bottom:3px; 
	right:20px;
	background-color:#F5BF80;
	cursor:pointer;
}
textarea.cl62 {
	width:475px;
	height:155px;
	border:1px solid #BBBBBB;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	padding:5px 25px 5px 5px;
	color:#CACACA;
	resize: none;
}
textarea{
overflow:hidden
}

JavaScript

$(function () {
             $('.arr2').click(function () {
                 $('.cl62').animate({ scrollTop: $(document).height() }, 'slow');
                 return false;
             });

             $('.arr1').click(function () {
                 $('.cl62').animate({ scrollTop: 0 }, 'slow');
                 return false;
             });
});