JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="index">目次</h1>
<ul>
  <li><a href="#1">sample1</a></li>
  <li><a href="#2">sample2</a></li>
  <li><a href="#3">sample3</a></li>
  <li><a href="#4">sample4</a></li>
</ul>
<div id="1">
  <h2>sample1</h2>
  <a class="button" href="#index">Topへ</a>
</div>
<div id="2">
  <h2>sample2</h2>
  <a class="button" href="#index">Topへ</a>
</div>
<div id="3">
  <h2>sample3</h2>
  <a class="button" href="#index">Topへ</a>
</div>
<div id="4">
  <h2>sample4</h2>
  <a class="button" href="#index">Topへ</a>
</div>

CSS

div {
  height: 1000px;
}

JavaScript

$('a[href^="#"]').click(function() {
  // スクロールの速度
  var speed = 400; // ミリ秒で記述
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $('body,html').animate({
    scrollTop: position
  }, speed, 'swing');
  $(href).addClass('active');
  return false;
});