<ul class="custom-nav">
    <li><span class="show-item item-one current">Item One</span></li>
    <li><span class="show-item item-two">Item Two</span></li>
</ul>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery(".item-one").click(function(){
            jQuery(".hidden-area").hide();
            jQuery("#item_one.hidden-area").show();
            jQuery(".show-item").removeClass("current");
            jQuery(this).addClass("current");
            var fixer = jQuery("#header").height();
            jQuery('html,body').animate({scrollTop: jQuery("#item_one").offset().top-fixer}, 500);
        });
        jQuery(".item-two").click(function(){
            jQuery(".hidden-area").hide();
            jQuery("#item_two.hidden-area").show();
            jQuery(".show-item").removeClass("current");
            jQuery(this).addClass("current");
            var fixer = jQuery("#header").height();
            jQuery('html,body').animate({scrollTop: jQuery("#item_two").offset().top-fixer}, 500);
        });
    });
</script>
<style>
.hidden-area { display: none; }
#item_one { display: block; }
</style>