Javascript 跳过单页站点的导航链接

我有一个网站，是建立在一个单一的页面和所有的请求是由AJAX。这些页面类似于

site.com/#Page

或

site.com/#Page/Other

现在，我需要在站点中实现a

Skip-Navigation

链接，但是由于URL以

#

开头，我不能使用简单的锚。有没有办法不用更改所有的URL就可以做到这一点？谢谢

---

注意：跳过导航至少做了3件事：滚动到页面的该部分，关注内容开始的元素（它甚至可以是不可聚焦的元素，例如

H1

标题），并让屏幕读者知道更改。

要实现您想要的内容，您可以查看

scrollTop（）

在JQuery中：

您有两件事要做：

• 具有可聚焦元素（对于默认情况下不可聚焦的元素，如

  h1

  ，使用tabindex=“-1”）

• 使用javascript/jQuery

  focus（）

  方法对其进行聚焦

例如：

document.getElementById("myEle").focus();

或

---

我终于明白了。我基本上不得不

禁用用于处理哈希更改的框架/脚本

更改URL以指向主内容

恢复原始URL并重新启用我在#1中禁用的内容

例如，我有一个这样的活动：

var onPageChange = function (newLocation, historyData) {
    // load page
};

<a href="javascript:pageChangeEnabled=false;var oh=location.hash;location.hash='#content';location.hash=oh;pageChangeEnabled=true;void(0);" id='skipNav'>Skip Navigation</a>

首先，我将其更改为：

var pageChangeEnabled = true;
var onPageChange = function (newLocation, historyData) {
    if (pageChangeEnabled) {
        // load page
    }
};

然后，

跳过导航

链接如下所示：

var onPageChange = function (newLocation, historyData) {
    // load page
};

<a href="javascript:pageChangeEnabled=false;var oh=location.hash;location.hash='#content';location.hash=oh;pageChangeEnabled=true;void(0);" id='skipNav'>Skip Navigation</a>

---

更新：正如Adam所解释的，这并不完全有效，因为键盘导航没有改变。最后我做了：

$（'#content'）.attr（'tabindex'，'-1'）.focus（）
您是否使用SPA框架？了解有关如何处理路由的详细信息会很有帮助。例如，有一些用户。@Jasen不，我不是。我使用一个简单的JS库来处理浏览器历史记录，但仅此而已。我在您的示例中看到的是，它只滚动，但不适用于键盘导航或屏幕阅读器。
scrollTop
只滚动窗口，它不做我在注释中提到的其他事情：。主要的问题是它没有聚焦在元素上，所以屏幕阅读器不会从那里开始读取。这不会使键盘聚焦于元素。（按tab键将指向页面的第一个链接）@Adam你说得对。我想我已经试过你的答案了，但没有成功。我现在试过了（再次？），它在Chrome和NVDA上运行得非常好：）谢谢。如果你把它放在一个函数中，并用
link\u elem.onclick=scroll\u top\u函数将它附加到链接上，它将更具可读性和可维护性