My design features three blocks stacked on top of each other with an additional block at the bottom below the middle.
Left <--------> Middle<---------->Right
-----------------Bottom------------------
I have a couple of queries.
Why is scrolling to the left not working for negative values? (when clicking on section 2)
(I am getting
)$('#section1').offset().left == -4000How can I utilize
for navigation between top and bottom sections?scrollTop: $($anchor.attr('href')).offset().top
Visit JSFIDDLE link here
Here's the HTML code:
<div class="section white" id="section1" style='margin-left: -4000px;'>
<h2>Section 1</h2>
<ul class="nav">
<li><a href="#section2">Right</a></li>
</ul>
</div>
<div class="section black" id="section2">
<h2>Section 2</h2>
<ul class="nav">
<li><a href="#section1">Left</a></li>
<ii><a href="#section4">Bottom</a></ii>
<li><a href="#section3">Right</a></li>
</ul>
</div>
<div class="section white" id="section3">
<h2>Section 3</h2>
<ul class="nav">
<li><a href="#section2">Left<</a></li>
</ul>
</div>
<div class="section_vertical white" id="section4">
<div style="width:33%; margin: 0 auto">
<h2>Section 4</h2>
<ul class="nav">
<li><a href="#section2">up</a></li>
</ul>
</div>
</div>
Javascript code:
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 3000);
event.preventDefault();
});