Sliding An Entire Web Page

Is there a way to mimic the native transition and functionality of "sliding entire pages" like you see on the iPhone but inside a web browser instead?

I want one HTML page to slide over and a new HTML page to take it's place after the press of a button.

The button cannot be constant. So like if you were to have a constant header with buttons that slid content inside a box then that would be incorrect. I need to slide the entire webpage.

Would slides made in HTML5 be what I need? Thank you in advance for any help!

Edit: I have also been thinking about possibly setting up two full-sized DIV's side by side with one hidden off the page with "overflow:hidden" and then using CSS transitions to hit a button and then move one DIV off the screen and the other one into view, but I have no idea how to do that.

The other really hard part about this is that my DIV containers need to be dynamic and 100% width and height. I can't used fixed dimensions.

EDIT:

Using the scrollTo and localscroll functions developed by Ariel Flesler I have been able to complete 99% of what I am looking for. However, at the very end of development, I hit a huge road block. Here is an image that I hope helps explain what I am trying to do:

My problem is that the main content area is a fixed position with an overflow-y auto so that I can keep the scrollbar for the DIV inbetween the header and the footer. But the problem is that when I initiate the sliding animation of my DIV by hitting my button, the fixed content area does not move and only the header and footers move. If I change the positioning of the main content area to "relative" everything moves like I want it to, but I lose the positioning of the scroll.

If someone could figure this out I will be greatly indebted to you!

(I would post a link to what I have, but I can't. It's confidential work for a company)

Thank you in advance!!

EDIT I am working on reviewing all this information. I will respond in a couple days. Thank you all for you input!