如何创建 W3C 或 Gmail 风格的#anchor“链接”？答案

【问题标题】：How to create W3C- or Gmail-esque #anchor "links"?如何创建 W3C 或 Gmail 风格的#anchor“链接”？
【发布时间】：2010-10-24 20:45:10
【问题描述】：

如果您使用 Gmail，您会在地址栏中看到以下网址：
https://mail.google.com/mail/#inbox
https://mail.google.com/mail/#starred
如果您转到这些 URL 之一，它将直接跳转到相应的视图。

类似的例子是http://validator.w3.org，其中锚点#validate_by_uri、#validate_by_upload 和#validate_by_input 分别自动聚焦不同的选项卡。

这些事情是怎么做的？该页面是否使用 Javascript 来检测锚点然后为您切换视图？如何防止页面滚动到锚点位置？

【问题讨论】：

【解决方案1】：

页面使用 JavaScript 评估 window.location 对象的“hash”属性。

通过禁用 JavaScript 来尝试一下。至少对于验证器页面，这会产生一个不出所料的结果。

【讨论】：

【解决方案2】：

YUI 包含一个 history manager 为您实现该功能。检查source code 应该可以帮助您了解它的工作原理。

【讨论】：