JSFiddle - React, Tailwind, and code Playground

by rillkoff

HTML

<div class="header">
  <a class="btn" href="#hidden">Тык</a>
</div>
<div class="block">

</div>
<div id="hidden" class="hidden hide">
  <p>
  Some text here.
  </p>
</div>
<script>
let btn = document.querySelector(".btn");
let hidden = document.querySelector(".hidden");
let block = document.querySelector(".block");
btn.addEventListener("click", function(){
	block.classList.add("hide");
	hidden.classList.remove("hide");
})
</script>

CSS

.header{
  background-color: gray;
  width: 100%;
  height: 200px;
}

.block{
  width:100%;
  height: 200px;
  background-color: black;
}

.hidden{
  width: 100%;
  height: 200px;
  background-color: blue;
}

.hide{
  display: none;
}

JavaScript

$("about_economy_href").click(function() {
    $('html, body').animate({
        scrollTop: $("header_wrap").offset().top + $("header_wrap").height() + 2
    }, {
		duration: 370, 
        easing: "linear" 
	});
});