JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
    <div style="height: 2000px;">
      <h1>Scroll Down Example</h1>

      <button onclick="scrollToElement()">Scroll to Element</button>

    </div>
    <div id="target" style="margin-top: 1200px; background: lightblue;">
      Scroll to this element
    </div>

CSS

html,
body {
  color: #454545;
}

JavaScript

// Scroll down by 500 pixels
//window.scrollBy(0, 500);
// Scroll to position (0, 1000)
//window.scrollTo(0, 1000);


/* function scrollDown() {
  window.scrollTo({
    top: 1000,
    behavior: 'smooth'
  });
}
 */

/* document.getElementById('scrollButton').addEventListener('click', function() {
  window.scrollBy({
    top: 500,
    left: 0,
    behavior: 'smooth'
  });
});
 */

function scrollToElement() {
  document.getElementById('target').scrollIntoView({
    behavior: 'smooth'
  });
}