How to slide an entire page on load with jquery

Question

I'd like to slide my entire page down when it's changed. I'm thinking the way to do this will be to create a vertical slide that plays when a link is clicked and again when the page loads? So far, I've only been able to create a slide that affects a particular DIV. I'd also like it to slide in vertically. Any ideas will be greatly appreciated!

Answer 1

Just wrap all your content inside a div and slide that down.

CSS

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

HTML

<div id="bodyContent">
    //all your stuff goes in here
</div>

Javascript/JQuery

$(document).ready(function(){
   $('#bodyContent').slideDown();
});