How can I go about creating a scrollable page content using arrow keys?

I'm just experimenting around with HTML and JavaScript and I'm a bit stumped on how I can do this.

I want to create a page that can be scrolled using arrow keys on the keyboard or pressing a button to scroll to the next page.

The idea is to have the content spread out but by using the arrow keys it'll go to the next piece of content without reloading the web page. I've tried a few things including AngularJS but I'd rather have it hardcoded and not using a framework (unless it's extremely difficult without)

So you can see that there'd be an arrow button/arrow key pressed which would trigger the next page. Could this be done in multiple HTML files or would it be better doing it all in one file and having each page of content in different divs?

Once I'd figured that out I'd be looking to implement an animation so that when the arrow is pressed you can see the next page overlap the previous one.