jQuery - Smooth scroll only working to top - need it to work to bottom aswell

jQuery - Smooth scroll only working to top - need it to work to bottom aswell

im trying to use a smooth scroll for my href elements. The only problem is
that i can only get it to do it upwards.
The live site is here
If you click on the box "Webdesign" it should do a smooth scrool down to
the .content. The same thing if you hit the button of the bottom of that
content it should scroll up to the top again smoooth(That works fine) -
Its downwards to the start of the "webdesign" content it doesnt work.
script used in the bottom of the site:
<script type="text/javascript">
$("a[href^='#']").click(function(){
var contentPosTop = $('.content').position().top;
$('html, body').stop().animate({
scrollTop: contentPosTop
}, 1500);
});
</script>
Any ideas?