How to create W3C- or Gmail-esque #anchor “links”?

Question

If you use Gmail, you'll see URLs in the address bar like:
https://mail.google.com/mail/#inbox
https://mail.google.com/mail/#starred
If you go to one of these URLs, it will jump straight to the corresponding view.

A similar example is on http://validator.w3.org where the anchors #validate_by_uri, #validate_by_upload and #validate_by_input each auto-focus different tabs.

How are these things done? Does the page use Javascript to detect the anchor then switch view for you? How do you prevent the page scrolling to the anchor position?

Answer 1

The page uses JavaScript to evaluate the "hash" property of the window.location object.

Go try it out by disabling JavaScript. At least with the validator page this produces an unsurprising result.

Answer 2

YUI includes a history manager that implements that for you. Examination of the source code should help you understand how it works.