JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banner">
	<ul>
<li><a href="#home">Home</a></li>  
<li><a href="#newsletter">Newsletter</a></li>  
<li><a href="#directions">Directions &amp; Opening Hours</a></li>  
<li><a href="#contact">Contact us</a></li></ul>
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>

<div id="wrap">
    <div id="home" class="panel">
        <h2>Home</h2></div>
    <div id="newsletter" class="panel">
			<h2>Newsletter</h2>
    </div>
     <div id="directions" class="panel">
			<h2>Directions & Opening Hours</h2>
    </div>
    <div id="contact" class="panel">
			<h2>Contacts</h2>
    </div>
    
</div>

CSS

body {
			width: 8000px;
			margin: 0;
		}

		.panel {
			width: 930px;
			float: left;
			padding-left: 30px;
			padding-right: 1040px;
			margin-top: 45px;
			background: #eee;
			
		}
		
		#banner {
			position: fixed;
		}
		
		#banner ul {
			line-height: 45px;
			margin: 0 30px;
			padding: 0;
		}
		
		#banner ul li {
			display: inline;
			margin-right: 30px;
		}
#wrap {

float: left;

}

JavaScript

$(document).ready(function() {
    var suivant=$("#home").next();
    var precedant=$("#wrap div").last();
		       $("#banner a").bind("click",function(event){
		           event.preventDefault();
		           var target = $(this).attr("href");
                   
		           $("html, body").stop().animate({
		               scrollLeft: $(target).offset().left,
                       scrollTop: $(target).offset().top
                     
		           }, 1200);
                       suivant=$(target).next();
                       precedant=$(target).prev();
                       
		       });

/*	$('#next').click(function() {
        event.preventDefault();

            $eL=$('#home').children('div').filter(":visible");
          $('#home').children().hide();
          if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('#home div')[0].show();
          }
    });*/


    $('#next').bind('click',function(event){
         event.preventDefault();
    
    $("html, body").stop().animate({
		               scrollLeft: suivant.offset().left
                       
                     
		           }, 1200);
                    precedant=suivant.prev();
                   if(!suivant.is("#wrap div:last"))
                    suivant=suivant.next();
		       });
    
      $('#prev').bind('click',function(event){
         event.preventDefault();
    
    $("html, body").stop().animate({
		               scrollLeft: precedant.offset().left          
		           }, 1200);
          
                    suivant=precedant.next();
                   if(!precedant.is("#wrap div:first"))
                    precedant=precedant.prev();

		       });
  
    
 });