JSFiddle - React, Tailwind, and code Playground

by Sreeraj Saseendran

HTML

<script src="https://raw.githubusercontent.com/cferdinandi/smooth-scroll/master/dist/smooth-scroll.js"></script>
<h1>
<a class="smoolthscroll" href="#hello">Go to the middle</a><br><a data-scroll class="smoolthscroll" href="#hello">Go</a></h1>
<div class="spacer"></div>
<h1 id="hello">Hello!</h1>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /* removing this line allows it to work as expected*/
  overflow-x: hidden;
}

/**
 * Ignore presentational styles...
 */

html,
body {
  background: #2ecc71;
  color: #fff;
  font-family: Helvetica, arial, sans-serif;
}

a {
  color: inherit;
}

.spacer {
  height: 300%;
  width: 100%;
  background: #9b59b6;
}

JavaScript

var scroll = new SmoothScroll('a[href*="#"]');