scroll with offset test

HTML

<body>
    <div id="wrap">
        <header>
        </header>
        
        <article class="top">hisjo</article>
        <article></article>
        <article></article>
        <article></article>
        <article class="middle">sn</article>
        <article></article>
        <article></article>
        <article></article>
        <article class="bottom">hdiuhid</article>
        
        <ul>
            <li><a href="#" class="one">One</a></li>
            <li><a href="#" class="two">Two</a></li>
            <li><a href="#" class="three">Three</a></li>
            <li><a href="#" class="four">Four</a></li>
            <li><a href="#" class="five">Five</a></li>
        </ul>
    </div>
</body>

CSS

#wrap{
        margin:0px auto 0px auto;
        width:800px;
        position:relative;
        background-color:#999;
    }
    article{
        height:300px;
        width:400px;
        background-color:#bada55;
        margin-bottom:5px;
    }

JavaScript

$("document").ready(function(){
        $('.one').click(function(){
            $('html, body').animate({
                scrollTop: $(".top").offset().top
            }, 2000);
        });
        $('.two').click(function(){
            $('html, body').animate({
                scrollTop: $(".middle").offset().top
            }, 2000);
        });
        $('.three').click(function(){
            $('html, body').animate({
                scrollTop: $(".bottom").offset().top
            }, 2000);
        });
    });