I'm trying to implement this effect on my site:

Engage site

I want to scroll areas of a content window by selecting the navigation to the left of it...

So in my My website example

I want to click one of the links on within the product list and then I want it to scroll to that div..

currenly it does move to the correct div.. but I have two issues with it:

1. It scrolls to the head of that div but leaves no padding/margin at the top of the header of that div.. I'd like it to have a 20px top margin.

2. The animation is not working it simply jumps without the smoothness of the engage site.

I'm using this bit of code to fire the plug-in

Code JavaScript:
	$('ul.productsNav').localScroll({ filter:'.animated', duration:400, axis:'x' });

Whereby the ul.productsNav is the list to the left of the main content window half way down the page..

I have checked in firebug to make sure localscroll is loading and it all seems to be loading..

any ideas how I can sort these issues out?

Any help would be much appreciated..