Question

If we have a single page website with different divs (sections) and a header at the top with different links pointing to different anchors (divs) on the page, or of course by scrolling. How can I display a little indicator on the link that represents the anchor the user is currently on, and example is this website.

Answer 1

I’d use the :hover CSS selector (http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes). You can also use a title attribute on the link to create a tooltip.

UPDATE:

I have to assume by your comment that you are referring to the “Page Indicator” in the lower right of the linked website.

To mimic that, simply change the CSS of the targeted indicator when you change the active div. Here’s a simple example: http://jsfiddle.net/N39Gf/1/

Mind you, if you’re willing to consider using jQuery or a similar library, animations get super simple, as does class-switching and many other operations needed to mimic this effect.