JSFiddle - React, Tailwind, and code Playground

by jarod51

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</h2>
    </div>
        <div id="contact" class="panel">
			<h2>contact</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() {
		       $("#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);
		       });
   
    
 });

var i = 0;

$(function() {
    $('#next').bind('click',function(event){
         event.preventDefault();
        var lis = $("li");
        
        i = (i+ 1) % lis.length;
        var currentLi = $(lis[i]);
        var $anchor = currentLi.children('a').attr('href');   
        console.log("I after next: " + i);
        
$("html, body").stop().animate({
		               scrollLeft: $($anchor).offset().left
					   
		           }, 1000);
		       });
  
    
 });



$(function() {
    $('#prev').bind('click',function(event){
         event.preventDefault();
        var lis = $("li");
        i = i- 1; 
        var currentLi = $(lis[i]);
        var $anchor = currentLi.children('a').attr('href');
        
$("html, body").stop().animate({
		               scrollLeft: $($anchor).offset().left
					   
		           }, 1000);
		       });
  
    
 });