Using the 'easy scroll' JS, I'm trying to scroll content inside a div. Two problems with this:

1) Links do not take you to the targeted element (Jumps halfway between other divs, takes you to wrong section...etc).
2) Content does not slide within the limits of the main border (some slide half way, some fit in perfectly).

Turning off Java, the links take you to the right content and are aligned perfectly, but otherwise I'm messing up the JS! Am I using the wrong script for this effect?

Code:
 
<div style="padding:20px; text-align:center"><a href="#1">1</a>&nbsp;<a href="#2">2</a>&nbsp;<a href="#3">3</a>&nbsp;<a href="#4">4</a></div>

<div class="wrapper" style="margin:0 auto; height:500px; width:850px; border:1px black solid; overflow:hidden">
<div id="1" style="height:500px; width:800px; background:aqua; border:1px blue solid">1</div>
<div id="2" style="height:500px; width:800px; background:lime; border:1px blue solid">2</div>
<div id="3" style="height:500px; width:800px; background:orange; border:1px blue solid">3</div>
<div id="4" style="height:500px; width:800px; background:pink; border:1px blue solid">4</div>
</div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type="text/javascript">
    $(function(){
     
    $('a[href*=#]').click(function() {
     
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
     
    var $target = $(this.hash);
     
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
     
    if ($target.length) {
     
    var targetOffset = $target.offset().top;
     
    $('html,.wrapper').animate({scrollTop: targetOffset}, 1000);
     
    return false;
     
    }
     
    }
     
    });
     
    });
</script>