Boxes Next to each Other full page

Multiple boxes on top and next to each other with navigation

HTML

<div id="b2x0" class="horizontal">
    <h1>Home</h1>
    <a href="#b2x1" class="br">About</a>
</div>

<div id="b2x1" class="horizontal">
    <h1>About.</h1>
    <a href="#b2x0" class="bl">Home</a>
    <a href="#b2x2" class="br">Services</a>
</div>

<div id="b2x2" class="horizontal">
    <h1>Services.</h1>
    <a href="#b2x1" class="bl">About</a>
    <a href="#b2x3" class="br">Contact</a>

</div>

<div id="b2x3" class="horizontal">
    <h1>Contact.</h1>
    <a href="#b2x2" class="bl">Services</a>
</div>

CSS

html, body {
    height: 100%;
}
body {
    white-space: nowrap;
    overflow: hidden;   
}

p {margin-bottom: 12px;}

.clear { clear:both;}

#b2x0 {background: yellow;}
#b2x1 {background: red;}
#b2x2 {background: green;}
#b2x3 {background: purple;}

.horizontal {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 100%;
    display: inline-block;
}

.br {
    position:absolute;
    color:black;
    right:10px;
    bottom:10px;
}

.bl {
    position:absolute;
    color:black;
    left:10px;
    bottom:10px;
}

JavaScript

var $root = $('html, body');
$('a').click(function () {
    $root.animate({
        scrollLeft: $($.attr(this, 'href')).offset().left,
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 1600);

    return false;
});