I have recently hit a wall with this and would greatly appreciate and guidance on this issue. My attempt is to have a scrolling effect for a background image and text for each menu item. I am using LocalScroll.js for the background images and ScrollTo.js for the text. The problem is that the navigation is breaking after any menu item is selected. TIA for your time and any help.
HTML
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jason Harris</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
</head>
<body>
<div id="floater"></div>
<div id="centered">
<div id="navigation" class="menu">
<ul class="links">
<li class="home"><a href="#section_home" id="content_home" title="homebase">homebase</a></li>
<li class="web"><a href="#section_web01" id="content_web01" title="webbase01">webbase01</a></li>
<li class="web"><a href="#section_web02" id="content_web02" title="webbase02">webbase02</a></li>
<li class="web"><a href="#section_web03" id="content_web03" title="webbase03">webbase03</a></li>
<li class="photo"><a href="#section_photo01" id="content_photo01" title="photobase01">photobase01</a></li>
<li class="photo"><a href="#section_photo02" id="content_photo02" title="photobase02">photobase02</a></li>
</ul>
</div>
<div id="content">
<div id="overlay">
<div id="content_home" class="pane">
<p>this is the home text</p>
</div>
<div id="content_web01" class="pane">
<p>this is the web01 text</p>
</div>
<div id="content_web02" class="pane">
<p>this is the web02 text</p>
</div>
<div id="content_web03" class="pane">
<p>this is the web03 text</p>
</div>
<div id="content_photo01" class="pane">
<p>this is the photo01 text</p>
</div>
<div id="content_photo02" class="pane">
<p>this is the photo02 text</p>
</div>
</div>
<div id="photo-bg">
<div id="section_home" class="section"> </div>
<div id="section_web01" class="section"> </div>
<div id="section_web02" class="section"> </div>
<div id="section_web03" class="section"> </div>
<div id="section_photo01" class="section"> </div>
<div id="section_photo02" class="section"> </div>
</div>
</div>
</div>
<script src="js/jquery.scrollTo-min.js"></script>
<script src="js/jquery.localscroll-min.js"></script>
<script src="js/init.js"></script>
</body>
</html>
Init.js
Code:
jQuery(function( $ ){
/**
* Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
* @see http://flesler.demos.com/jquery/scrollTo/
* You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll.
*/
// The default axis is 'y', but in this demo, I want to scroll both
// You can modify any default like this
$.localScroll.defaults.axis = 'xy';
// Scroll initially if there's a hash (#something) in the url
$.localScroll.hash({
target: '#content', // Could be a selector or a jQuery object too.
queue:true,
duration:1500
});
/**
* NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
* also affect the >> and << links. I want every link in the page to scroll.
*/
$.localScroll({
target: '#content', // could be a selector or a jQuery object too.
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});
$.scrollTo.defaults.axis = 'xy';
// This one is important, many browsers don't reset scroll on refreshes
// Reset all scrollable panes to (0,0)
$('div.pane').scrollTo( 0 );
// Reset the screen to (0,0)
$.scrollTo( 0 );
// Target examples bindings
// THIS DEMO IS NOT INTENDED TO SHOW HOW TO CODE IT
// JUST THE MULTIPLE OPTIONS. THIS CODE IS UGLY.
var $paneTarget = $('#overlay');
$('#content_home').click(function(){
$paneTarget.stop().scrollTo( '0' , 1000 );
});
$('#content_web01').click(function(){
$paneTarget.stop().scrollTo( '800px' , 500 );
});
$('#content_web02').click(function(){
$paneTarget.stop().scrollTo( '1600px' , 800 );
});
$('#content_web03').click(function(){
$paneTarget.stop().scrollTo( '2400px' , 800 );
});
$('#content_photo01').click(function(){
$paneTarget.stop().scrollTo( '3200px' , 800 );
});
$('#content_photo02').click(function(){
$paneTarget.stop().scrollTo( '4000px' , 800 );
});
});
Before you post, read our: 
