JSFiddle - React, Tailwind, and code Playground

HTML

<article style="background:#0bf;" id="top">WELCOME (wait 3 sec)</article>
<article style="background:#f0b;" id="about">ABOUT</article>
<article style="background:#b0f;" id="work">OUR WORK</article>
<article style="background:#0fb;" id="testimonials">TESTIMONIALS</article>
<article style="background:#fb0;" id="contact">
  CONTACT <a href="#top">TO TOP</a>
</article>

CSS

/*QuickReset*/
	*{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}

	article {
	  height: 150vh;
	}

JavaScript

function goTo(selector, timeout, cb) {
		var $el = $(selector);
		if (!$el[0]) return;
		var $par = $el.parent();
		if ($par.is("body")) $par = $("html, body");
		setTimeout(() => {
			$par.stop().animate({scrollTop: $el.offset().top}, 1000, cb && cb.call($el[0]));
			}, timeout || 0);
		}

		// USE LIKE:
		goTo("#testimonials", 3000, function() {
			// You can use `this` to reference #testimonials! yey
			$(this).append("<br>Going to #contact in 3sec!");
			goTo("#contact", 6000);
		});
		// Alternatively, without using callbacks you can do
		// goTo("#testimonials", 3000);
		// goTo("#contact", 6000);
		// Reuse function for elements click!
		$("[href^='#']").on("click", function(e) {
			e.preventDefault();
			goTo($(this).attr("href"));
		});