JQuery scrollTo doesn't work

[bigdog61]

Hi everybody,

I can't get the JQuery scrollTo function to work (it's a single-page design). Here's the link to the page: http://www.mapguy.net/test/salem/

I think the problem might be because I'm calling JQuery with other scripts too - there is a NIVO slider and a lightbox which call JQuery 1.4. When I click on the links, it just jumps to the page sections without the scroll effect.

Here is the script part of the code (in the page head):

<script type="text/javascript"src="jquery.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
<script type="text/javascript" src="jquery.nav.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
  	$('#nav').onePageNav();
		});
	});

</script>
	<script type="text/javascript" src="scripts/jquery-1.4.js"></script> 
    <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
        effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, //Slide transition speed
        pauseTime:6000,
        controlNav:false, //1,2,3...
        directionNav:false, //Next & Prev
        directionNavHide:true, //Only show on hover
		    });
    });
    </script>

 
<script type="text/javascript" src="scripts/jquery-easing.js"></script>  
<script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>  
<script type="text/javascript" src="scripts/portfolio-setter.js"></script>  

 

<script type="text/javascript">  
	$(function(){  
		$('#portfolio').portfolioSetter({
				itemsPerPage: 10,
				pageWidth: 750,
				pageHeight: 500,
				showCategories: false
		});  
	}); 

</script>

Here's the navigation HTML:

	<ul id="nav">
		<li class="current"><a href="#home">home</a></li>
		<li><a href="#services">services</a></li>
		<li><a href="#portfolio">portfolio</a></li>
		<li><a href="#process">process</a></li>
		<li><a href="#contact">contact</a></li>
	</ul>

Here's the HTML for the slider at the top:

	<div id="slider">
	<img src="images/steinbeck-nivo.jpg" alt="" height="450" width="350" />
	<img src="images/road-nivo.jpg" alt="" height="450" width="350" />
	<img src="images/compendium-nivo.jpg" alt="" height="450" width="350" />
</div><!--/slider -->

Any help would be greatly appreciated.

[DanInMa]

first things first. you are loading the Jquery framework twice, a common mistake. remove one of the references to the jquery framework and see if that fixes the issue before continuing on.

- also youd loading some of your coed using the JQ document.ready function and then loading more script using window.onload, which is alsmot the same thing.

[DanInMa]

here I cleaned up your javascript section :

<script type="text/javascript" src="scripts/jquery-1.4.js"></script>
<script type="text/javascript" src="scripts/jquery-easing.js"></script>  
<script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>  
<script type="text/javascript" src="scripts/portfolio-setter.js"></script> 
<script type="text/javascript" src="jquery.scrollTo.js"></script>
<script type="text/javascript" src="jquery.nav.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>


<script type="text/javascript">
	$(document).ready(function() {
  	$('#nav').onePageNav();
		

	  $('#slider').nivoSlider({
        effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, //Slide transition speed
        pauseTime:6000,
        controlNav:false, //1,2,3...
        directionNav:false, //Next & Prev
        directionNavHide:true, //Only show on hover
		    });

	$('#portfolio').portfolioSetter({
				itemsPerPage: 10,
				pageWidth: 750,
				pageHeight: 500,
				showCategories: false
		}); 	
	});
</script>