Edit in JSFiddle

var scrollAnim = () => {
	$(".js-btn").on('click', e => {
    e.preventDefault();
    
    var target = $(e.currentTarget).attr('href');
    var targetP = $(target).position();
    var scrollP = $('.box').scrollTop();
    var position = targetP.top + scrollP;
    
    $(".box").animate({
      scrollTop: position
    }, 400);
    
  });
}
scrollAnim();

<h1 class="h1">scroll layer anchor link animation</h1>

<div class="wrap">
	<div class="inner">
    <ul class="list">
      <li><a class="js-btn" href="#sectio01">01</a></li>
      <li><a class="js-btn" href="#sectio02">02</a></li>
      <li><a class="js-btn" href="#sectio03">03</a></li>
      <li><a class="js-btn" href="#sectio04">04</a></li>
      <li><a class="js-btn" href="#sectio05">05</a></li>
    </ul>
    <div class="box">
      <section class="section" id="sectio01">
        <h2>title01</h2>        
        <p>クリックした要素のhref属性からスクロール先のid属性を取得してポジションを得る(このとき親にpositionプロパティを与えておく)</p>
        <p>スクロール先の親からの相対的なポジションと、現在のスクロール量を合わせたて、親要素をアニメーションさせる</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
      </section>
      <section class="section" id="sectio02">
        <h2>title02</h2>        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
      </section>
      <section class="section" id="sectio03">
        <h2>title03</h2>        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
      </section>
      <section class="section" id="sectio04">
        <h2>title04</h2>        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
      </section>
      <section class="section" id="sectio05">
        <h2>title05</h2>        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum iusto saepe, vero beatae. Earum error vel qui tenetur repellendus, in ex praesentium facere dolores cupiditate esse, recusandae reiciendis inventore.</p>
      </section>
    </div>
	</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">

body {
	width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(60deg, #F7CAC9 15%, #91A8D0 85%);
}

.h1 {
  margin: 1.2em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
	min-width: 300px;
}

.box {
  position: relative;
  height: 320px;
  max-width: 630px;
  padding: 1em 2em;
  overflow: auto;
  text-align: justify;
  border: 5px double currentcolor;
}

.list {
  display: flex;
  justify-content: space-between;
  font-size: 42px;
}