JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<a href="#test-1">1</a>
<a href="#test-2">2</a>
<a href="#test-3">3</a>


<div id="test-1" style="background: red;"></div>
<div id="test-2" style="background: blue;"></div>
<div id="test-3" style="background: brown;"></div>

CSS

#test-1,#test-2,#test-3 {
    height: 100vh;
}

JavaScript

$("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      var y = $(hash).offset().top - 183;
      console.log(y)
      $('html, body').animate({
        scrollTop: y
      }, 800, function(){
      });
    }
  });
  
  setTimeout(function(){
  	$('a[href="#test-3"]').trigger('click');
    console.log('1')
  },1000)