JSFiddle - React, Tailwind, and code Playground

by Felipe Stoker

HTML

<ul class="float-right">
  <li class="madmaxmenu">
    <a href="#mad-max">Mad Max</a>
  </li>
  <li class="theroadwarriormenu">
    <a href="#the-road-warrior">The Road Warrior</a>
  </li>
  <li class="beyondthethunderdomemenu">
    <a href="#beyond-the-thunderdome">Beyond The Thunderdome</a>
  </li>
  <li class="furyroadmenu">
    <a href="#fury-road">Fury Road</a>
  </li>
</ul>

JavaScript

$(".theroadwarriormenu").click(function() {
  $('html,body').animate({
      scrollTop: $("#theroadwarrior").offset().top - 120
    },
    'slow');
});
$(".beyondthethunderdomemenu").click(function() {
  $('html,body').animate({
      scrollTop: $("#beyondthethunderdome").offset().top - 120
    },
    'slow');
});
$(".furyroadmenu").click(function() {
  $('html,body').animate({
      scrollTop: $("#furyroad").offset().top - 120
    },
    'slow');
});
$(".madmaxgamesmenu").click(function() {
  $('html,body').animate({
      scrollTop: $("#games").offset().top - 120
    },
    'slow');
});
$(".comicsmenu").click(function() {
  $('html,body').animate({
      scrollTop: $("#comics").offset().top - 120
    },
    'slow');
});