I am trying to make a jquery plug in work for me and I am very new to this. I am using the horizontal scroller jquery easing plug in but I cannot get in to work right??? The way the tutorial I used has you set it up is you use divs for each link so it scrolls to the next div. My problem is that I have 3 different pages that my naivation needs to scroll to so I have no idea how to make those into divs???? I am so confused and I am making a mess out of my code now. I attach my files if needed so someone can help me! PLEASE!

The way the tutorial has it the links are actually divs but I have changed it to attempt to make it work but it doesnt........

The tutorial has the html like this:

<div class="section black" id="section1">

<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
<div/>


Here is what I have so far:

<!--Horizontal Scroller html-->

<div class="section black" id="section1">
<ul class="nav">
<li>1</li>
<li><a href="graphicDesign.html">Graphic Design</a></li>
<li><a href="webDesign.html">Web Design</a></li>
</ul>
</div>


<!-- The JavaScript Horizontal Scrolling-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);

<!--Div section1 script-->
$('a').click(function(){
var data = $(this).attr('href');
$('#content').load(data+'#data');
return false;
});


<!--Easing Effects-->
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
<!--End-->

event.preventDefault();
});
});
</script>