JSFiddle - React, Tailwind, and code Playground

by handtrix

HTML

<ul class="menu">
    <li><a href="#pos1">pos1</a></li>
    <li><a href="#pos2">pos2</a></li>
    <li><a href="#pos3">pos3</a></li>
    <li><a href="#pos4">pos4</a></li>
    <li><a href="#pos5">pos5</a></li>
</ul>


<h2 id="pos1">pos1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt assumenda vitae harum quia, quibusdam iste sint, modi sunt est aut adipisci inventore aperiam mollitia neque in, illum iure impedit voluptatum?</p>

<h2 id="pos1">pos1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt assumenda vitae harum quia, quibusdam iste sint, modi sunt est aut adipisci inventore aperiam mollitia neque in, illum iure impedit voluptatum?</p>

<h2 id="pos2">pos2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt assumenda vitae harum quia, quibusdam iste sint, modi sunt est aut adipisci inventore aperiam mollitia neque in, illum iure impedit voluptatum?</p>

<h2 id="pos3">pos3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt assumenda vitae harum quia, quibusdam iste sint, modi sunt est aut adipisci inventore aperiam mollitia neque in, illum iure impedit voluptatum?</p>

<h2 id="pos4">pos4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt assumenda vitae harum quia, quibusdam iste sint, modi sunt est aut adipisci inventore aperiam mollitia neque in, illum iure impedit voluptatum?</p>

<h2 id="pos5">pos5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt assumenda vitae harum quia, quibusdam iste sint, modi sunt est aut adipisci inventore aperiam mollitia neque in, illum iure impedit voluptatum?</p>

CSS

p{
    margin-bottom: 100px;
}

li.selected{
    background-color: yellow;
}

JavaScript

// Prevent page jumps
$("a[href^=#]").on("click", function(event) {
  event.preventDefault();
  history.pushState({}, "", this.href);
});

// Update the menu
$('.menu li').on('click', 'a', function(e) {  
  $(this)
    .parents()
      .siblings()
        .removeClass('selected')
      .end()
      .addClass('selected')
    .end();
});