JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<ul id="#myid">
    <li><a href="#menu1">menu 1</a></li>
    <li><a href="#menu2">menu 2</a></li>
    <li><a href="#menu3">menu 3</a></li>
    <li><a href="#menu4">menu 4</a></li>
</ul>
<p></p>
<div id="menu1">Menu - 1</div>
<div id="menu2">Menu - 2</div>
<div id="menu3">Menu - 3</div>
<div id="menu4">Menu - 4</div>

CSS

#menu1, #menu2, #menu3, #menu4{
    height:200px;
    background-color:red;
    margin-top:4px;
    padding:10px;
}
ul{
    margin-bottom:150px;
}

JavaScript

/*var pos;
$(document).ready(function(){
    $('a').click(function(){
     var id = $(this).attr('href');
  });     
});

$( window ).scroll(function() {
  var pos = $(this).attr('id');  
  alert(pos);
}); */

/*$(document).ready(function(){
  $("a").click(function(){
    pos=$(this).position();
    alert("Top position: " + pos.top + " Left position: " + pos.left);
  });
}); */

$(document).ready(function(){
  $("a").click(function(){       
      var id=$(this).attr('href');      
      scrollAnchor = id.slice(1);
      scrollPoint = $('div[id="' + scrollAnchor + '"]').offset().top - 60;
            
      $('body,html').animate({
        scrollTop: scrollPoint
    }, 500);      
  });
});