JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
  <a href="#d1">d1</a>
  <a href="#d2">d2</a>
  <a href="#d3">d3</a>
  <a href="#d3">d4</a>
</div>

<div class="long">
  <div class="placeholder" id="d1">
    <p>Div #1</p>
  </div>
  <div class="placeholder" id="d2">
    <p>Div #2</p>
  </div>
  <div class="placeholder" id="d3">
    <p>Div #3</p>
  </div>
  <div class="placeholder" id="d4">
    <p>Div #4</p>
  </div>
</div>

CSS

.long {
  width: 1800px;
}

.placeholder {
  height: 100px;
  width: 400px;
  border: 1px solid black;
  float: left;
}

#myTarget {
  background-color: blue;
}

#nav{
  position:fixed;
  left:0;
  top:0;
}

JavaScript

function horizAnim(event) {
	event.preventDefault();
  $('html,body').animate({
    scrollLeft: $(this.hash).offset().left
  }, 'slow');
}

$("a").on("click", horizAnim);