Пропустить навигацию для сайта с одной страницей

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

Чтобы достичь того, чего вы хотите, вы можете посмотреть на scrollTop() в JQuery: 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); 

UPDATE: Как пояснил Адам, это не в полной мере работать как навигация с помощью клавиатуры не меняется. Я закончил делать: $('#content').attr('tabindex', '-1').focus();