跳過單頁網站的導航鏈接

Question

我有一個構建為單頁的站點，所有請求都是使用AJAX創建的。 頁面類似於site.com/#Page或site.com/#Page/Other 。

現在，我需要在站點中實現Skip Navigation鏈接，但因為URL以#開頭，所以我不能使用簡單的錨點。 有沒有辦法在不更改所有URL的情況下執行此操作？ 謝謝。

注意：跳過導航至少做3件事：滾動到頁面的那一部分，專注於內容開始的元素（它甚至可以是一個不可聚焦的元素，例如H1標題）並讓屏幕閱讀器知道改變。

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

更新：正如亞當所解釋的那樣，由於鍵盤導航不會改變，因此無法完全發揮作用。 我最終做了： $('#content').attr('tabindex', '-1').focus();