scroll layer anchor link animation

by uto usui

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Dancing+Script:400,700"></script>
<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...

SCSS

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;
}

Babel + JSX

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();