I am trying to create a horizontal DIV scroll when a button is clicked, it will scroll to the corresponding DIV ID.
I used the following code, but it works pretty buggy, for example, if you click on section 2, then press 3, and on section 2.
I need the sections to be 200 pixels on the left and not scroll to 0px on the left. I think that made me run into problems.
Here is the violin to see it in action
http://jsfiddle.net/susannalarsen/vurbwete/
.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;
}
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">
<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 black" id="section2">
<h2>Section 2</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">
<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 black" id="section3">
<h2>Section 3</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">
<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>
</div>
</div>
SCRIPT:
$(function() {
$('.nav a').bind('click',function(event){
var $anchor = $(this);
$('#content').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left - 200
}, 1000);
event.preventDefault();
});
});