This seems like a simple one, but I must be missing something? I want the page to slide down into view when the document loads. I thought I could do it by just wrapping the content in a div positioned off the page, and bring it down. But nothing happens? here's what I was thinking:

<style>
#slidebody {
    height: 100%;
    position:relative;
    top:-900px; /* maybe I can do it without this? */
}
</style>



<html>
    <head>
        <title>xxxx</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Website Vertical Scrolling with jQuery" />
        <meta name="keywords" content="jquery, vertical, scrolling, scroll, smooth"/>
        <link rel="stylesheet" href="css/styles_default.css" type="text/css" media="screen"/>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'><!-- google font -->

    </head>

    <body>
    <div id="slidebody"><!-- here's the container div -->

        <?php include 'inc/header.php'; ?>

        <?php include 'inc/footer.php'; ?>

        <!-- ////////////////////////// SECTION ONE  ////////////////////////// --> 
        <div name="one" class="section black" id="section1">
            <div id="gallery_about" class="gallery">

            </div>

            <h2>header 1</h2>
            <p class="body_copy">
               Lorem 1 ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae justo ipsum. Donec eros lorem, convallis non dictum ut, mattis id nisl. Proin vitae est ac ligula varius interdum. Nulla ac magna sit amet ante tempor accumsan. Nunc nunc dolor, viverra id posuere vitae, tincidunt ac velit. Mauris consequat semper risus, sed rutrum tellus lobortis eget. Suspendisse lacinia neque eu enim suscipit tristique accumsan est dictum. Etiam imperdiet elementum libero eget porta. 
            </p>
           <ul class="nav" style="float:right;">
                <li>1</li>
                <li><a href="#section2">2</a></li>
                <li><a href="#section3">3</a></li>
            </ul> 
        </div>


       <!-- ////////////////////////// SECTION TWO   ////////////////////////// --> 
        <div name="two" class="section white" id="section2">
            <div id="gallery_floorplans" class="gallery">

            </div>

            <h2>header 2</h2>

            <p class="body_copy">
                Lorem 2 ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae justo ipsum. Donec eros lorem, convallis non dictum ut, mattis id nisl. Proin vitae est ac ligula varius interdum. Nulla ac magna sit amet ante tempor accumsan. Nunc nunc dolor, viverra id posuere vitae, tincidunt ac velit. Mauris consequat semper risus, sed rutrum tellus lobortis eget. Suspendisse lacinia neque eu enim suscipit tristique accumsan est dictum. Etiam imperdiet elementum libero eget porta. 

            </p>
        </div>


         <!-- ////////////////////////// SECTION THREE ///////////////////// --> 
        <div name="three" class="section black" id="section3">
        <div id="gallery_hood" class="gallery">

            </div>
            <h2>header3</h2>
            <p class="body_copy">
                Lorem 3 ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae justo ipsum. Donec eros lorem, convallis non dictum ut, mattis id nisl. Proin vitae est ac ligula varius interdum. Nulla ac magna sit amet ante tempor accumsan. Nunc nunc dolor, viverra id posuere vitae, tincidunt ac velit. Mauris consequat semper risus, sed rutrum tellus lobortis eget. Suspendisse lacinia neque eu enim suscipit tristique accumsan est dictum. Etiam imperdiet elementum libero eget porta. 

            </p>
        </div>




</div>

    </body>

    <script>
$(document).ready(function() {
    $("#slidebody").slidedown();
});
</script>
</html>

slideDown works on hidden elements
remove top:-900px; from css
and add display:none;

Change slidedown() function to slideDown() (D capital)

good catch... but still nothing. I tried it without any css as well, and no good.

I also found a css animation solution. But it doesn't work in enough of the commonly used browsers, yet. So I'm stuck trying to find a jquery solution.

ah... I think I got it working now. It worked with the css set as this:

#slidebody {
     height: 100%;
     display:none;
}

Ahhh...mentioned in above comment

remove top:-900px; from css
and add display:none;