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>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu leo iaculis, lacinia eros pellentesque, eleifend quam. Fusce convallis commodo mi vel mollis. Donec vel augue nec felis ultricies lacinia ac consectetur lacus. Aenean eget nunc tortor. Aenean sed justo eget nisi bibendum fringilla ut a orci. Phasellus vestibulum, sem vel semper scelerisque, ante tellus suscipit libero, a rhoncus leo est non dolor. Suspendisse sed augue dui. In nulla eros, accumsan non scelerisque sit amet, ullamcorper vel ante.</p>
    
    <p>Maecenas placerat elementum urna, vitae mattis ligula adipiscing vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis hendrerit sem dictum fringilla tincidunt. Mauris consequat augue id velit vestibulum condimentum. Ut mauris nunc, condimentum eu nisi ut, posuere vestibulum nibh. Morbi mattis quam tempus, ullamcorper lorem ut, cursus est. Proin feugiat nulla a risus auctor consequat. Aenean dignissim elit vel metus posuere, ac sagittis est tempus.</p>
    <a href="#b2x1" class="br">About</a>
</div>

<div id="b2x1" class="horizontal">
    <h1>About.</h1>
    <p>Sed sollicitudin, tellus non malesuada faucibus, urna nisi condimentum felis, eget feugiat sem lorem accumsan velit. In laoreet lectus eget est adipiscing malesuada. Nulla eget libero est. Sed quam velit, sodales adipiscing lorem id, tincidunt sagittis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus tellus risus, pretium nec aliquet quis, vulputate ac quam. Phasellus ullamcorper odio ac eros tristique, a sodales est malesuada. Donec a diam vitae nunc volutpat sagittis et sed enim. Etiam sed urna pulvinar massa convallis condimentum in sit amet purus. Aliquam tempor est velit, vitae rutrum nisl suscipit ut. Cras urna ipsum, faucibus ut tellus et, euismod dictum est. Phasellus dictum diam lectus, non ullamcorper nisl...

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;
});