JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <nav id="frameNavBox">
    Some Nav stuff
  </nav>
</header>
<main>
  <ul id="id_ScrollToNav">
    <li><div>0</div></li>
    <li><div>1</div></li>
    <li><div>2</div></li>
    <li><div>3</div></li>
    <li><div>4</div></li>
    <li><div>5</div></li>
    <li><div>6</div></li>
    <li><div>7</div></li>
    <li><div>8</div></li>
  </ul>
</main>

CSS

ul{width:450px; margin:auto;}
li {float:left;cursor:pointer;}
div{width:150px; height:150px;}

JavaScript

function init() {
  var objList = document.querySelector("#id_ScrollToNav")
  console.log(objList);
  objList.addEventListener('click', function (e) {
    console.log(e);
    var li = e.target.closest('li');
    var parent = li.parentNode;
    var index = Array.prototype.indexOf.call(parent.children, li);
    console.log((index + 1) + 'th element selected');
    e.stopPropagation();
  }, false);
}
        
init();