JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<h5 id="auto_scroll01"></h5>
<h5 id="auto_scroll02"></h5>
<h5 id="auto_scroll03"></h5>
<h5 id="auto_scroll04"></h5>

JavaScript

$(function() {
		//This is what the JS is looking for to scroll. a link tag with the # id
		$('a[href*="#"]:not([href="#"])').click(function() { 
			if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
				var target = $(this.hash);
				target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
				if (target.length) {
					$('html, body').animate({
						//this -100 is so the element does not over scroll.
						scrollTop: target.offset().top - 100 
					//this will determine the speed. for example this is take 2 seconds.
					}, 2000); 
					return false;
				}
			}
		});
	});
	$(".scrollbutton").on("click", function(e) {
		e.preventDefault();
		console.log("scrolling");
		$('html, body').animate({
			scrollTop: $(".navigation-bar ").position().top - $(".header-inner").height() + parseInt($("#outer-content-container").css("margin-top"))
		}, 2000);
	});