Pure CSS solution. No need for
overflow: hidden; on body, which automatically scrolls everything to the top. Make use of
overflow: auto; instead.
How-To & Demo
See the demo here and source code here.
What Is Overflow: Auto?
W3C documentation is rather vague on its definition: “The behavior of the ‘auto’ value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.”
In essence, the browser displays a scrollbar where it sees fit. Usually it’s when something on the top layer overflows in one direction or two.
Browser compatibility is pretty awesome, it agrees with everything apart from IE8, even including IOS Safari.