JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<nav class="nav">
	<a href="#box-a">nav a</a>
	<a href="#box-b">nav b</a>
	<a href="#box-c">nav c</a>
	<a href="#box-d">nav d</a>
	<a href="#box-e">nav e</a>
	<a href="#box-f">nav f</a>
</nav>
<hr/>
<div class="container">
	<div class="box-a">a</div>
	<div class="box-b">b</div>
	<div class="box-c">c</div>
	<div class="box-d">d</div>
	<div class="box-e">e</div>
	<div class="box-f">f</div>
</div>

CSS

.container {
	border: 1px solid #ccc;
  display: block;
  overflow: hidden;
  position: relative;
}

[class*=box-] {
	border: 1px solid #aaa;
	height: 200px;
  width: 300px;
  float: left;
  display: inline-block;
  position: relative;
}

/* .container div { width: 200px; float: left; } */

JavaScript

var slice = [].slice;
var navs = slice.call(document.querySelectorAll('.nav a'), 0);
navs.forEach(function(nav) {
	nav.addEventListener('click', function(e) {
		var href = e.target.getAttribute('href');
		selectNav(href.replace('#', ''));
	});
});

function selectNav(className) {
	var el = document.querySelector('.' + className);
	console.log(el, el.className);
	el.scrollIntoView({
		block: "start",
		behavior: "smooth"
	});
}