JSFiddle - React, Tailwind, and code Playground

by HcJanni

HTML

<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script defer src="https://unpkg.com/[email protected]/dist/smoothscroll.min.js"></script>
    <!--<script src="assets/script.js" type="text/javascript"></script>-->
  </head>

  <body>
<ul>
          <li class="nav-item"><button type="button" data-number="1" class="activenav navb scrollwrap">link1</button></li>
          <li class="nav-item"><button type="button" data-number="2" class="navb scrollwrap">link2</button></li>
          <li class="nav-item"><button type="button" data-number="3" class="navb scrollwrap">link3</button></li>
          <li class="nav-item"><button type="button" data-number="4" class="navb scrollwrap">link4</button></li>
        </ul>
 
  
  <section class="sample wrapper">
      <article class="scrollable-element-to-top">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
        adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
        adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
        adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
      </article>
      </section>
  
  </body>
  </html>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

body {
  height: 2000px;
  overflow-x: hidden;
}

.sample {
  margin-top: 1500px;
}

JavaScript

window.addEventListener('load', function() {

  // scroll into view
  var btns = document.querySelectorAll('.scrollwrap');
  for (let i = 0; i < btns.length; i++) {

    btns[i].addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelector('.wrapper').scrollIntoView({
        behavior: 'smooth'
      });
    });
  }
});