JSFiddle - React, Tailwind, and code Playground

HTML

<a data-target="#link1" href="#">Link1</a>
	<a data-target="#link2" href="#">Link2</a>
	<a data-target="#link3" href="#">Link3</a>
	<a data-target="#link4" href="#">Link4</a>
	<a data-target="#link5" 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){
		
		
		$($(this).data('target')).scrollTo();
		
	});
});

/*
* ScrollToElement 1.0
* Copyright (c) 2009 Lauri Huovila, Neovica Oy
*  lauri.huovila@neovica.fi
*  http://www.neovica.fi
*  
* Dual licensed under the MIT and GPL licenses.
*/

(function($) {
    $.scrollToElement = function($element, speed) {

        speed = speed || 750;

        $("html, body").animate({
            scrollTop: $element.offset().top,
            scrollLeft: $element.offset().left
        }, speed);
        return $element;
    };

    $.fn.scrollTo = function(speed) {
        speed = speed || "normal";
        return $.scrollToElement(this, speed);
    };
})(jQuery);