Horizontal scrolling

An example of horizontal scrolling

HTML

<header>
    <nav>
        <ul>
            <li><a class="nav-item1" href="#">Item 1</a></li>
            <li><a class="nav-item2" href="#">Item 2</a></li>
            <li><a class="nav-item3" href="#">Item 3</a></li>
        </ul>
    </nav>
</header>
<section>
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
</section>

CSS

nav { position: fixed; z-index: 1030; }
section { width: 3600px; top: 100px; position: relative; overflow: auto; }
.item{ float: left; position: relative; width: 900px; height: 500px; font-size: 200px; }
.item1 { background: #f00; }
.item2 { background: #0f0; }
.item3 { background: #00f; }

JavaScript

$(document).ready(function (){
    $('.nav-item1').click(function (event) {
        horizontalNavigation(0, event);
    });
    $('.nav-item2').click(function (event) {
        horizontalNavigation(900, event);
    });
    $('.nav-item3').click(function (event) {
        horizontalNavigation(1800, event);
    });
});

function horizontalNavigation(position, event) {
    $('html').animate({
    scrollLeft: scrollLeft();
    event.preventDefault();
    },500)
}