跳过单页网站的导航链接

Question

我有一个构建为单页的网站，所有请求都是使用 AJAX 发出的。这些页面类似于site.com/#Page 或site.com/#Page/Other。

现在，我需要在站点中实现 Skip Navigation 链接，但由于 URL 以 # 开头，我无法使用简单的锚点。有没有办法在不更改所有 URL 的情况下做到这一点？谢谢。

注意： 跳过导航至少做了 3 件事：滚动到页面的那个部分，关注内容开始的元素（它甚至可以是不可聚焦的元素，例如H1title) 并让屏幕阅读器了解更改。

Answer 1

你有两件事要做：

• 有一个可聚焦的元素（使用 tabindex="-1" 表示默认情况下不可聚焦的元素，例如h1）

• 使用 javascript/jQuery focus() 方法聚焦它

例子：

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

或

jQuery("#myEle").focus();

Answer 2

要实现你想要的，你可以看看JQuery中的scrollTop()：https://api.jquery.com/scrollTop/

Answer 3

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

1. 禁用用于处理哈希更改的框架/脚本
2. 更改 URL 以指向主要内容
3. 恢复原始 URL 并重新启用我在 #1 中禁用的内容。

例如，我有一个这样的事件：

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

首先，我把它改成：

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

然后，Skip Navigation 链接如下所示：

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

为了便于理解，这是href中的代码：

// disable navigation
pageChangeEnabled=false;

// save current hash
var oldHash=location.hash;

// update the hash/anchor, make everything work
location.hash = '#content';

// restore the old hash, as there are no elements that have the same
// name of the URL, it works
location.hash = oldHash;

// re-enable page navigation
pageChangeEnabled=true;

// void(0); is just to avoid the navigation of the link
void(0);

更新：正如 Adam 所解释的，这并不完全有效，因为键盘导航不会改变。我最终做了：$('#content').attr('tabindex', '-1').focus();