Content inside figure scrolls together?

Please note: Since I'm not too familiar with coding terminology, I'll try my best to explain what I'm exactly going for!

We first start with a page, for demonstration purposes, I'll call it one.html. The page is populated with divs. The div's width and height are measured by percentage, and have padding. These are responsive, too:

Inside these divs are one.html content that range from images and text to nothing at all. I'll color-code one.html content in blue. The content are either on the left side or the right side of the div:

Now heres the question: When a person scrolls up (purple circle represents mouse and touch), all the content scrolls up together, and the content for two.html (colored in red) scrolls in. In addition, the url goes from one.html to two.html:

Technical stuff: to ensure one.html content and two.html content won't dangle in the divs, it'll automatically complete the scroll. For example, scroll in http://u-p.co/aesop/ -- see how it automatically completes it's scroll?

Is this possible to do? Also, would it be a good idea if I start a jsfiddle?

Thank you very much in advance :)