I'm just curious about how this is done as eventually I want to develop my own single page wordpress theme.
I've seen themes that are all on one page but just scroll down, and as you add a new menu item (or page) it adds a new css section to the page. An example can be seen on this template demo: Wordpress In-Motion theme As you can see, you click the menu links and it takes you down to that section. In the css it adds #news or #about-us
Can someone explain to me how this is created as a function when designing a wordpress theme? Sam
That has nothing to do with Wordpess. It simply is using anchors to take you down or up the page.
If an element on the page has a unique id, you can create an anchor tag to link to that id (and it will take you there on the page)
e.g.
<div id="anchor">...</div>
<div id="something-else>...</div>
<a href="#anchor">Click here to go to id=anchor div</a>
<a href="#something-else">Clicker to go to something-else id div</a>
The Wordpress theme you gave an example of also had Javascript or jQuery smoothing - so it would scroll nicely to the anchor, instead of instantly taking you there like plain HTML would do.