JSFiddle - React, Tailwind, and code Playground

するするスクロール（未完）

by yshrkn

HTML

<body>

<div id="block01" class="block"></div>
<div id="block02" class="block"></div>
<div class="block"></div>

<ul class="links">
  <li><a href="#">トップへ</a></li>
  <li><a href="#block01">ブロック1へ</a></li>
  <li><a href="#block02">ブロック2へ</a></li>
  <li><a href="#block03">合致するidが無いものはトップへ</a></li>
</ul>

</body>

SCSS

.block {
  width: 100%;
  height: 300px;
}

#block01 {
  background: red;
}

#block02 {
  background: yellow;
}

.links {
  margin-top: 300px;
}

JavaScript

(function() {

  function moveToInternalLink() {
    var speed = 500;
    var $target = $($(this).attr("href"));
    var position = $target.length ? $target.offset().top : 0;

    $('body,html').animate({scrollTop:position}, speed);
    return false;
  }

  function addEventListener() {
    $("a[href^='#']").on("click", moveToInternalLink);
  }

  /**
   *
   */
  (function init() {
    addEventListener();
  }());

}());