on click scroll content horizontally

When clicking through navigation this will scroll animate to the anchor point

by susanna

HTML

<ul class="nav">
                    <li><a href="#section1">1</a></li>
                    <li><a href="#section2">2</a></li>
                    <li><a href="#section3">3</a></li>
                   </ul>
    
		<div id="content">
        <div class="inner-content">
        <div id="control-faders-wrapper">
            <div class="desk-fader-container black" id="section1">
                <h2>Section 1</h2>
                <p>
                    MY Spectre around me night and day
                    Like a wild beast guards my way;
                    My Emanation far within
                    Weeps incessantly for my sin.
                </p>
            </div>
            <div class="desk-fader-container">
                <p>
                    ‘A fathomless and boundless deep,
                    There we wander, there we weep;
                    On the hungry craving wind
                    My Spectre follows thee behind.
    
                </p>
            </div>
            <div class="desk-fader-container">
                <p>
                    ‘He scents thy footsteps in the snow
                    Wheresoever thou dost go,
                    Thro’ the wintry hail and rain.
                    When wilt thou return again?
    
                </p>
            </div>
            <div class="desk-fader-container">
                <p>
                    ‘He scents thy footsteps in the snow
                    Wheresoever thou dost go,
                    Thro’ the wintry hail and rain.
                    When wilt thou return again?
    
                </p>
            </div>
            <div class="desk-fader-container">
                <p>
                    ‘He scents thy footsteps in the snow
                    Wheresoever thou dost go,
                    Thro’ the wintry hail and rain.
                    When wilt thou return again?
    
                </p>
            </div>
            <div class="desk-fader-container">
          ...

CSS

.nav {
			position:absolute;
			z-index:10000;
			background:red;
			left:0;
		}
		#content {
	position:absolute;
	left:200px;
	top:0px;
	right:0px;
	bottom:0px;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
	background:green;
}
.inner-content {
	height:105%;
	padding-right:9000px;	
}
#control-faders-wrapper {
	white-space:nowrap;
	padding-right:200000px;
}
.section{
    margin:0px;
    bottom:0px;
    width:600px;
    display:inline-block;
    height:100%;
    text-shadow:1px 1px 2px #f0f0f0;
}
.black{
    color:#fff;
   
    background:#000 url(../images/black.jpg) no-repeat top right;
}
.white{
    color:#000;
    background:#fff url(../images/white.jpg) no-repeat top right;
}

.desk-fader-container {
	background:#e8e8e8;
	border:1px solid #d2d2d2;
	padding:7px;
	font-size:12px;
	text-align:center;
	display:inline-block;
	margin-left:10px;
	padding-top:20px;
	-webkit-border-bottom-right-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	-moz-border-radius-bottomright: 7px;
	-moz-border-radius-bottomleft: 7px;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	white-space:normal;
	width:100px;
}

JavaScript

$(function() {
                $('.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                     */
                    $('#content').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left - 200
                    }, 1000);
                    event.preventDefault();
                });
            });