JSFiddle - React, Tailwind, and code Playground

HTML

<div id="textarea">
  <div id="area">
    <div></div>
    <div></div>
  </div>
</div>
<button class="btn parte1">parte 1</button>
<button class="btn parte2">parte 2</button>

CSS

#textarea {
  width: 200px;
  height: 100px;
  overflow-x: scroll;
  background: #eee;
}
#area {
  width: 400px;
  background: #ddd;
}
#area div {
  width: 200px;
  height: 75px;
  float: left;
  background: #ccc;
}

JavaScript

if(localStorage.getItem('scrollposition')){
	$('#textarea').scrollLeft(localStorage.getItem('scrollposition'));
}


$('.btn.parte1').click(function(){ 
      $('#textarea').animate({ scrollLeft: 0 }, 400, function(){
          localStorage.setItem('scrollposition', 0);
      });
      return false; 
});
$('.btn.parte2').click(function(){ 
      $('#textarea').animate({ scrollLeft: 140 }, 400, function(){
          localStorage.setItem('scrollposition', 140);
      });
      return false; 
});