JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="first">
  &lt; insert very interesting website content &gt;
</div>
<div class="second">
  <h2 id="contact-View" href="#contact-View">Contact</h2>
  <p>Here my contact information might be found.</p>
</div>

CSS

.first {
  width: 100%;
  height: 1000px;
  border: 2px solid black;
}
.second {
  width: 100%
  height: 200px;
  border: 2px solid red;
}

JavaScript

// Ignore this, need it to fix JSFiddle
window.location.hash = '#scroll:contact-View';

jQuery(document).ready(function() {
    // Get the hash from the URL
    var hash = window.location.hash;
    // If a hash exists and starts with "#scroll:"
    if (hash.length && hash.indexOf('#scroll:') === 0) {
    // Get the anchor name we are scrolling to
    var selectionID = hash.substr('#scroll:'.length);
    // Call the jQuery scroll function
    jQuery("html, body").animate({
      scrollTop: jQuery('#'+selectionID).offset().top
    }, 1000);
  }
});