跳过单页网站的导航 link

Question

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

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

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

Answer 1

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

Answer 2

你有两件事要做：

有一个可聚焦元素（使用 tabindex="-1" 用于默认不可聚焦的元素，如 h1）
使用javascript/jQueryfocus()方法聚焦它

示例：

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

或

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

Answer 3

我终于想通了。我基本上不得不

禁用用于处理哈希更改的framework/script
将URL改为指向主要内容
恢复原始 URL 并重新启用我在 #1 中禁用的内容。

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

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

首先我改成：

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

然后，Skip Navigation link 看起来像这样：

<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();

跳过单页网站的导航 link

Skip navigation link for single page site

html

javascript

accessibility

single-page-application