I found a cool example of selecting items from a page: (see below)
As you see, when selecting one of the items you automatically scroll down to that particular item in question where you get to read about it in more detail. And at any time you can select another item.
What’s this feature called and what is needed to incorporate this into a website?
I’d like to include a large text section on my site which I’m splitting into several smaller sections (i.e. “section A”, “section B”, “section C” and “section D”) and the above seems like an elegant way of doing this.
This feature uses anchors placed on the page just like when you would put a link (<a href=“#”>). It consists of 2 parts:
a) Adding the named anchor on the page (this is where the page will scroll to) you do this by placing a tag like this <a name=“mousedescription”>. “mousedescription” is whatever you want to call that anchor.
b) Adding the link to the anchor (when clicked the page will automatically go to “mousedescription” or whatever you name your anchor tag) <a href=“#mousedescription”> make sure to include the # before the anchor name
The eased scrolling effect is usually done with jquery or javascript.
Here is a good simple example of a similar effect to the website you provided, keep in mind for this example (and yours) rather than using <a name=“”> it is using the css id=“” tag as the anchor name for this effect to be able to target a div to scroll to: