JSFiddle - React, Tailwind, and code Playground

by sidouglas

HTML

<ul class="mk-responsive-nav">
<li><a href="#section-1">This will work</a></li>
<li><a href="#section-fail">This will fail</a></li>
</ul>

<section data-anchor="section-1">Section 1.</section>
<section data-anchor="section-2">Section 2.</section>

JavaScript

$(function() {
jQuery('.mk-responsive-nav > li > a').click( function() {


   var href = jQuery(this).attr('href').replace('#', '');
   var target = jQuery("section[data-anchor='" + href + "']");
   
   console.log(target.offset().top);
   
   if(target.length){
    console.log('scrolling to: ', target.offset().top );
   	jQuery(window).scrollTop( target.offset().top );
   }
   });
});