JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- THIS IS THE SCROLL TO TOP BUTTON -->
<!--NAVIGATION AND HEADER SECTION-->
<nav class="navbar about-navbar">
  <a href="index.html" class="navbar-brand">
    <img class="logo-desktop" src="icons/logo-white.svg">
    <img class="logo-small" src="icons/logo-white.svg">
  </a>
  <ul class="nav justify-content-end">
    <li class="nav-item about-nav-item">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item about-nav-item">
      <a class="nav-link active" href="about.html">About</a>
    </li>
    <li class="nav-item about-nav-item">
      <a class="nav-link" href="gallery.html">Gallery</a>
    </li>
    <li class="nav-item about-nav-item">
      <a class="nav-link" href="contact.html">Contact</a>
    </li>
    <div class="push-button">
      <div class="top-line"></div>
      <div class="middle-line"></div>
      <div class="middle-line under"></div>
      <div class="bottom-line"></div>
    </div>
  </ul>
</nav>
<div class="container-fluid header-section about-header-section">
  <div class="about-bg"></div>
  <div class="inside-element">
    <div class="col-12 col-lg-8 about-section-text">
      <div class="main-heading-text-box about-main-box">
        <h1 class="font-weight-light">We <span style="color: #16E1F5;">care</span> about people</h1>
        <h5 class="lead">Give a helping hand for poor people</h5>
        <a href="donate.html" class="about-donate-btn donate_button">
          <p class="first">Donate</p>
          <p class="second">Donate</p>
          <img src="icons/right_white.svg" alt="">
        </a>
      </div>
    </div>
    <!-- THIS IS THE SCROLL DOWN BUTTON -->
    <div class="scroll-down">Scroll</div>
  ...

JavaScript

$(function() {
  function log(txt) {
    var now = new Date();
    console.log(now.toString() + ": " + txt);
  }

  $(".scroll-down").click(function() {
    log("Scroll Down Clicked");
    $("document").animate({
      scrollTop: $("#about").offset().top - 64
    }, 800);
  });

  var $document = $(document),
    $element1 = $('#button'),
    changed = 'show';

  $('#button').click(function(e) {
    e.preventDefault();
    log("Button Click");
    $("html, body").animate({
      scrollTop: "0px"
    }, 500, function() {
      log("Scroll Animation Complete")
    });
  });
});