I have a one page portfolio site with a fixed header. It's simple I just want it so that when someone clicks a link in the header it eases nicely to that part of the page. Here is my code. I had someone take a look at it at jquery.com and they were helpful but it's still not working. Maybe someone here could give it a shot.

Here is my html code:

above the <style> tag in the <head> tag I have linked jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Here is my menu:
<li><a href="#sidebar-work" class="work">work<span></span></a></li>
<li><a href="#sidebar-about" class="about">about<span></span></a></li>
<li><a href="#sidebar-services" class="services">services<span></span></a></li>
<li><a href="#" class="blog">blog<span></span></a></li>
<li><a href="#sidebar-contact" class="contact">contact<span></span></a></li>
<li><a href="#" class="twitter">twitter<span></span></a></li>

I read somewhere that I should make my class link:

<a href="#sidebar-work" class="scrolltoanchor">Comments</a>

The problem is when I put that into my menu, the icon for my work link disappears (I'm using icons for my links, not just text).

Here is the javascript I have at the bottom of the page below the footer.

<script type="text/javascript">

$(function() {

function scroll(direction) {

var scroll, i,
positions = [],
here = $(window).scrollTop(),
collection = $('.post');

collection.each(function() {

for(i = 0; i < positions.length; i++) {
if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }

if (scroll) {
$.scrollTo(scroll, {
duration: 750

return false;

$("#next,#prev").click(function() {
return scroll($(this).attr('id'));

$("#menu a").click(function() {
$.scrollTo($($(this).attr("href")), {
duration: 750
return false;


ANY HELP is so appreciated!!