Scrolling with jQuery when scrolling is disabled on CSS

I would like to scroll the page using a jQuery animation yet the scrolling is disabled in the CSS & it doesn’t allow the animation to take place:

Here’s the fiddle: http://jsfiddle.net/AKPHB/1/

If you set overflow:hidden, the scroll event doesn’t happen. So you can’t trigger it using the animation either. And really, what’s the point of animating a scroll if the user can’t scroll anyway :p

One solution is to wrap the content in another container & animate the container instead, like this:

Demo: http://jsfiddle.net/AKPHB/10/

CSS:

And the Javascript: