JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<div id="left" class="page">
    <a id="left_link">THIS IS LEFT</a>
</div>

<div id="right" class="page">
    <a id="right_link">THIS IS RIGHT</a>
</div>

<a id="go_left">GO LEFT</a>
<a id="go_right">GO RIGHT</a>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background-image: url("img/bg.jpg");
    overflow: hidden;
    width: 300%;
}

.page {
    border:2px solid gold;
    float: left;
    padding:10px;
    text-align:center;
    width: 33.3333%;
}

a {
    color:blue;
    cursor:pointer;
}

JavaScript

window.scrollTo(($(document).width() - $(window).width()) / 2, 0);

$('#go_left').click(function(){
    $('html, body').scrollTo('0px', 800);
});
$('#go_right').click(function(){
    $('html, body').scrollTo('100%', 800);
});
$('#left_link').click(function(){
    $('html, body').scrollTo('50%', 800);
});
$('#right_link').click(function(){
    $('html, body').scrollTo('50%', 800);
});