JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#test">Test link</a></li>
<div id="filler" style="height: 5000px;"></div>
<section id="test">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante eget mauris venenatis interdum eu ultrices enim. Proin condimentum mollis sem eget tincidunt. Maecenas dignissim venenatis enim. In faucibus ornare nibh, sed ultrices odio lobortis et. Donec hendrerit velit diam, ut dictum ex dignissim non. Aenean consequat faucibus leo, vitae congue nulla venenatis eu. Morbi tempus non ex at egestas. Quisque dapibus quam nibh, egestas suscipit dui porttitor a.</p>
</section>
<div id="filler" style="height: 5000px;"></div>

JavaScript

$(document).ready(function () {
	$(document).on("scroll", onScroll);

	$('a[href^="#"]').on('click', function (e) {
		e.preventDefault();
		$(document).off("scroll");

		$('a').each(function () {
			$(this).removeClass('active');
		})
		$(this).addClass('active');

		var target = this.hash;
		$target = $(target);
		$('html, body').stop().animate({
			'scrollTop': $target.offset().top-100
		}, 500, 'swing', function () {
			window.location.hash = target;
			$(document).on("scroll", onScroll);
		});
	});
});

function onScroll(event){
	var scrollPosition = $(document).scrollTop();
}