JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="topo"></div>
<div id="menu">
  <a class="ancora" href="#conteudo1">Texto 1</a>
  <a class="ancora" href="#conteudo2">Texto 2</a>
  <a class="ancora" href="#footer">Rodape</a>
</div>
<div id="conteudo1"></div>
<div id="conteudo2"></div>
<div id="footer">
  <a class="ancora" href="#topo">vai para o topo</a>
</div>

CSS

body{
  width: 4000px;
}
div{
  border:1px solid #f00;
  height: 400px;
  width: 400px;
  float:left;
}
#menu{
  height: 50px;
}

JavaScript

$(function () {
    var $doc = $('html, body');
    $('.ancora').click(function () {
        $doc.animate({
            scrollLeft: $($(this).attr('href')).position().left
        }, 700);
        return false;
    });
});