scroll with offset test

HTML

<body>
    <div id="wrap">
    <header>
        ahoy!
    </header>
    <section>
        <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>
        </ul>
        <article class="top"></article>
        <article></article>
        <article></article>
        <article></article>
        <article class="middle"></article>
        <article></article>
        <article></article>
        <article></article>
        <article class="bottom"></article>
    </section>
    </div>
</body>

CSS

body {
    padding: 0;
}

#wrap{
    margin:0px auto 0px auto;
    width:800px;
    position:relative;
    background-color:#666;
}

header{
    width:100%;
    height:70px;
    position:fixed;
    margin:0px auto 0px auto;
    background-color:#ccffff;
    z-index:9999;
}

section{
    padding-top:70px;
}

article{
    height:300px;
    width:400px;
    background-color:#bada55;
    margin-bottom:5px;
}

JavaScript

var $header = $( 'header' ),
    headerHeight = $header.outerHeight( true );

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