JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">Link1</a>
	<a href="#">Link2</a>
	<a href="#">Link3</a>
	<a href="#">Link4</a>
	<a href="#">Link5</a>

	<h4>Content of the above links</h4>
	<div id="link1">
		<h3>Contents of #link1</h3>
		<p>Sample contents placed in the div #link1</p>
		<p>Sample contents placed in the div #link1</p>
		<p>Sample contents placed in the div #link1</p>
			
	</div>
	<div id="link2">
		<h3>Contents of #link2</h3>
		<p>Sample contents placed in the div #link2</p>
		<p>Sample contents placed in the div #link2</p>
		<p>Sample contents placed in the div #link2</p>
	
	</div>
	<div id="link3">
		<h3>Contents of #link3</h3>
		<p>Sample contents placed in the div #link3</p>
		<p>Sample contents placed in the div #link3</p>
		<p>Sample contents placed in the div #link3</p>
	
	</div>
	<div id="link4">
		<h3>Contents of #link4</h3>
		<p>Sample contents placed in the div #link4</p>
		<p>Sample contents placed in the div #link4</p>
		<p>Sample contents placed in the div #link4</p>
		<p>Sample contents placed in the div #link4</p>
		
	</div>
	<div id="link5">
		<h3>Contents of #link5</h3>
		<p>Sample contents placed in the div #link5</p>
		<p>Sample contents placed in the div #link5</p>
		<p>Sample contents placed in the div #link5</p>
		<p>Sample contents placed in the div #link5</p>
		
	</div>

CSS

#login {
  position: absolute;
  top: 50%;
  left: 50%;
}

a {
  text-decoration: none;
  display: inline-block;
  padding-right: 15px;
}

JavaScript

$(document).ready(function () {
	$('a').on("click",function(e){
		
		var posTop = $("#link1").offset().top;
        console.log(posTop);
		e.preventDefault();
		e.stopPropagation();
        $('html, body').scrollTop(posTop);
		console.log(window.location);
		
	});
})