JSFiddle - React, Tailwind, and code Playground

HTML

<a id="left" href="#leftAnchor" class="anchor">Left</a>
<a id="right" href="#rightAnchor" class="anchor">Right</a>

<div name="leftAnchor" id="leftElement">Left</div>
<div name="rightAnchor" id="rightElement">Right</div>

CSS

#left { position: absolute; left: 1500px; display: block; }

#leftElement, #rightElement { position: absolute; top: 30px; width: 300px; height: 100px; display: block; }
#leftElement { left: 0;  background: red; }
#rightElement { left: 1500px; background: blue; }

JavaScript

$('.anchor').click(function() {
    var anchor = String($(this).attr("href")).replace("#","");
    var selector = 'div[name="' + anchor + '"]';
    var e = $(selector);
    var left = e.offset().left;
   $('html, body').animate({scrollLeft: left }, 3000);
   return false;
});